質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

1017閲覧

Snap.svg複数要素の実装

makino_

総合スコア11

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/05/21 04:19

編集2021/05/21 06:33

前提・実現したいこと

SVGモーフィングを行うためにSnap.svgを導入しようと思っているのですが、
同ページ内で複数箇所アニメーションを実行(動作タイミングをずらして)させるにはどのようにコードを書いたらいいでしょうか?
動作は確認できるのですが、コードが長くなってしまいます...

HTML

HTML

1<div class="t-main-visual"> 2 <div class="js-svgMorphing js-svgMorphing01"> 3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="352.12px" height="387.49px" viewBox="0 0 352.12 387.49" style="overflow:visible;enable-background:new 0 0 352.12 387.49;" xml:space="preserve"> 4 <path class="st0" d="M52.2,69.82c-0.67-4.03-1.17-6.21-2.01-9.06l-2.27-7.13H24l-2.27,7.13c-1.09,3.36-1.68,5.96-2.1,9.06H0c1.26-2.52,2.01-4.53,4.03-10.24L22.16,9.06c1.51-4.11,2.27-6.63,2.69-9.06h21.9c0.59,2.43,1.18,4.62,2.85,9.06l18.21,50.52c1.59,4.45,2.94,7.89,4.03,10.24H52.2z M35.84,14.35l-7.81,25.18h15.78L35.84,14.35z"/> 5 </svg> 6 </div> 7 <div class="js-svgMorphing js-svgMorphing02"> 8 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="306.37px" height="396.6px" viewBox="0 0 306.37 396.6" style="overflow:visible;enable-background:new 0 0 306.37 396.6;" xml:space="preserve"> 9 <path class="st0" d="M12.42,70.08c-6.38,0-8.81,0.08-12.42,0.25c0.5-3.61,0.67-6.46,0.67-12.34V12.08C0.67,7.64,0.5,4.03,0,0c4.28,0.25,5.46,0.25,12.34,0.25h21.99c13.6,0,21.57,6.55,21.57,17.62c0,5.12-1.68,9.15-4.87,12c-1.85,1.59-3.36,2.43-6.8,3.69c4.11,0.92,6.29,1.93,8.73,4.03c3.61,3.19,5.46,7.72,5.46,13.26c0,12.08-8.56,19.22-23.16,19.22H12.42z M31.89,27.19c4.45,0,7.22-2.6,7.22-6.71s-2.6-6.46-7.39-6.46h-14.6v13.18H31.89z M17.12,56.23h15.44c5.29,0,8.48-2.94,8.48-7.89c0-4.87-3.19-7.72-8.56-7.72H17.12V56.23z"/> 10 </svg> 11 </div> 12 <div class="js-svgMorphing js-svgMorphing03"> 13 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="322.41px" height="382.7px" viewBox="0 0 322.41 382.7" style="overflow:visible;enable-background:new 0 0 322.41 382.7;" xml:space="preserve"> 14 <path class="st0" d="M46.91,25.85c-1.59-7.64-6.04-11.41-13.26-11.41c-10.24,0-16.2,8.06-16.2,21.9c0,13.68,6.21,21.99,16.62,21.99c4.62,0,8.56-1.93,10.99-5.29c1.43-2.01,2.01-3.69,2.52-7.22l17.46,2.6c-1.59,7.13-3.44,11.25-6.97,15.36c-5.2,5.96-13.34,9.15-23.5,9.15c-10.24,0-18.88-3.19-24.84-9.23C3.52,57.4,0,47.58,0,36.34C0,24.93,3.52,15.27,10.15,8.73C15.95,3.11,24.42,0,34.24,0C45.07,0,53.54,3.69,59,10.99c2.69,3.44,4.11,6.55,5.2,11.5L46.91,25.85z"/> 15 </svg> 16 </div> 17</div>

JS

JavaScript

1var svgMorphing = (function() { 2 var delay = 200; 3 var duration = 1000; 4 var indexPath = 0; 5 var path = [ 6 'M52.2,69.82c-0.67-4.03-1.17-6.21-2.01-9.06l-2.27-7.13H24l-2.27,7.13c-1.09,3.36-1.68,5.96-2.1,9.06H0c1.26-2.52,2.01-4.53,4.03-10.24L22.16,9.06c1.51-4.11,2.27-6.63,2.69-9.06h21.9c0.59,2.43,1.18,4.62,2.85,9.06l18.21,50.52c1.59,4.45,2.94,7.89,4.03,10.24H52.2z M35.84,14.35l-7.81,25.18h15.78L35.84,14.35z', 7 'M12.42,70.08c-6.38,0-8.81,0.08-12.42,0.25c0.5-3.61,0.67-6.46,0.67-12.34V12.08C0.67,7.64,0.5,4.03,0,0c4.28,0.25,5.46,0.25,12.34,0.25h21.99c13.6,0,21.57,6.55,21.57,17.62c0,5.12-1.68,9.15-4.87,12c-1.85,1.59-3.36,2.43-6.8,3.69c4.11,0.92,6.29,1.93,8.73,4.03c3.61,3.19,5.46,7.72,5.46,13.26c0,12.08-8.56,19.22-23.16,19.22H12.42z M31.89,27.19c4.45,0,7.22-2.6,7.22-6.71s-2.6-6.46-7.39-6.46h-14.6v13.18H31.89z M17.12,56.23h15.44c5.29,0,8.48-2.94,8.48-7.89c0-4.87-3.19-7.72-8.56-7.72H17.12V56.23z', 8 'M46.91,25.85c-1.59-7.64-6.04-11.41-13.26-11.41c-10.24,0-16.2,8.06-16.2,21.9c0,13.68,6.21,21.99,16.62,21.99c4.62,0,8.56-1.93,10.99-5.29c1.43-2.01,2.01-3.69,2.52-7.22l17.46,2.6c-1.59,7.13-3.44,11.25-6.97,15.36c-5.2,5.96-13.34,9.15-23.5,9.15c-10.24,0-18.88-3.19-24.84-9.23C3.52,57.4,0,47.58,0,36.34C0,24.93,3.52,15.27,10.15,8.73C15.95,3.11,24.42,0,34.24,0C45.07,0,53.54,3.69,59,10.99c2.69,3.44,4.11,6.55,5.2,11.5L46.91,25.85z', 9 'M0.76,12.34C0.76,6.63,0.59,3.86,0,0c3.36,0.17,5.46,0.25,12.42,0.25h17.54c10.32,0,18.63,2.85,24.25,8.31c6.13,6.04,9.23,14.85,9.23,26.02c0,11.5-3.36,20.73-9.74,27.11c-5.62,5.54-13.6,8.39-23.58,8.39H12.42c-6.46,0-8.81,0.08-12.34,0.25c0.5-3.69,0.67-6.46,0.67-12.25V12.34z M28.62,55.39c5.45,0,9.32-1.43,12.34-4.45c3.44-3.52,5.29-9.15,5.29-16.11c0-7.13-1.59-12.34-4.87-15.61c-2.94-2.94-6.97-4.28-13.01-4.28H17.37v40.45H28.62z', 10 'M52.62,71c-3.61-0.42-6.63-0.59-13.85-0.59H12.34c-6.38,0-8.73,0.08-12.34,0.25c0.5-3.36,0.67-6.46,0.67-12.25V12.59C0.67,7.39,0.5,4.45,0,0.34C3.44,0.5,5.79,0.59,12.34,0.59h26.77c5.71,0,8.56-0.17,12.5-0.59v15.69c-3.86-0.42-6.88-0.59-12.5-0.59H17.29v12.34h18.13c5.54,0,7.55-0.08,12.59-0.59v15.53c-3.94-0.42-6.8-0.59-12.59-0.59H17.29v14.1h21.65c6.38,0,10.07-0.17,13.68-0.59V71z' 11 ]; 12 var $morphing_1 = '.js-svgMorphing01 path' 13 var $morphing_2 = '.js-svgMorphing02 path' 14 var $morphing_3 = '.js-svgMorphing03 path' 15 var $svg01 = null; 16 var $svg02 = null; 17 var $svg03 = null; 18 var num; 19 20 function init() { 21 if($('.js-svgMorphing01').length) { 22 $svg01 = Snap($morphing_1) 23 animation01() 24 } 25 if($('.js-svgMorphing02').length) { 26 $svg02 = Snap($morphing_2) 27 animation02() 28 } 29 if($('.js-svgMorphing03').length) { 30 $svg03 = Snap($morphing_3) 31 animation03() 32 } 33 } 34 35 function randomNumber() { 36 num = Math.floor( Math.random() * 10 ); 37 } 38 39 function animation01() { 40 randomNumber() 41 if (indexPath === 0) { 42 setTimeout(function() { 43 $svg01.animate({ d: path[0] }, duration, animation01); 44 indexPath = 1; 45 }, delay + (num * 1000)) 46 } 47 else if(indexPath === 1) { 48 setTimeout(function() { 49 $svg01.animate({ d: path[1] }, duration, animation01); 50 indexPath = 2; 51 }, delay + (num * 1000)) 52 } 53 else if(indexPath === 2) { 54 setTimeout(function() { 55 $svg01.animate({ d: path[2] }, duration, animation01); 56 indexPath = 3; 57 }, delay + (num * 1000)) 58 } 59 else if(indexPath === 3) { 60 setTimeout(function() { 61 $svg01.animate({ d: path[3] }, duration, animation01); 62 indexPath = 4; 63 }, delay + (num * 1000)) 64 } 65 else if(indexPath === 4) { 66 setTimeout(function() { 67 $svg01.animate({ d: path[4] }, duration, animation01); 68 indexPath = 0; 69 }, delay + (num * 1000)) 70 } 71 } 72 73 function animation02() { 74 ... 75 } 76 77 function animation03() { 78 ... 79 } 80 81 82 83 return { 84 init: init, 85 } 86})(); 87svgMorphing.init();

Codepen: https://codepen.io/makiroi21/pen/MWpJBdP

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/05/21 04:42

動作が確認できません。 ソースが長いようならcodepenなど動作が確認できるサイトにアップしてください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問