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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1736閲覧

slickスライド切り替わりと同時に再生するSVGアニメーション

Tmakimaki

総合スコア5

SVG

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/27 05:56

前提

こちらのサイト(https://uzuz.jp/)にある、スライドで切り替わるSVGアニメーションを再現したいです。

SVGアニメーションの動きはできましたが、スライドと連動させることが出来ませんでした。
どなたかご教授頂けますと幸いです。

実現したいこと

スライドの動きを、
0. スライドAが表示後、SVGアニメーションA再生
0. スライドBが表示後、SVGアニメーションB再生
0. スライドCが表示後、SVGアニメーションC再生
.
.
.

以下ループ

という感じに、スライド切り替わりと同時にSVGアニメーションを再生。

該当のソースコード

html

1<ul id="slider"> 2 <li> 3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1800 1250"> 4 <path id="base_01" class="base" d="M1018,251c11.482,9.849,49,55,71.299,33.162c10.158-9.948-30.574-43.962-45.391-50.062c-40.527-16.687-73.606,1.587-61.908,30.9c7.511,18.822,42.165,44.257,65.15,54.206c58.665,25.393,124.253-18.383,71.328-73.425c-21.728-22.597-60.807-46.589-98.887-55.069c-47.599-10.599-91.431,26.801-81.055,65.081c12.97,47.851,67.352,100.297,127.513,109.867c75.124,11.951,114.467-22.774,104.303-83.168C1157.241,204.574,1093.147,172.762,1000,155"/> 5 <text rotate="180"> 6 <textpath id="path_01" startOffset="-2880" xlink:href="#base_01"><tspan>uzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzu</tspan> 7 </textpath> 8 </text> 9 </svg> 10 </li> 11 <li> 12 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1800 1250"> 13 <path id="base_02" class="base" d="M191.9,20c-54.7,38.6-76.6,114.3-76.6,114.3c-7.5,55.6-24.5,78.7-39.1,103.3s-106.3,61.8-28.3,214.2 s230.2,86,230.2,86s34.7-7.5,60.9-49.8"/> 14 <text rotate="180"> 15 <textpath id="path_02" startOffset="-2880" xlink:href="#base_02"><tspan>uzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzuzu</tspan> 16 </textpath> 17 </text> 18 </svg> 19 </li> 20</ul>

script

1//スライダー 2$(document).ready(function(){ 3 $('#slider').slick(); 4}); 5 6var stop = 0; 7var not_count = -2880; 8var id_01 = document.getElementById("path_01"); 9var count_01 = id_01.getAttribute("startOffset"); 10var id_02 = document.getElementById("path_02"); 11var count_02 = id_02.getAttribute("startOffset"); 12 13//SVGアニメーションの初期化 14$('#slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 15 id_01.setAttribute("startOffset", "-2880"); 16 id_02.setAttribute("startOffset", "-2880"); 17}); 18 19//SVGアニメーションの発火 20$('#slider').on('afterChange', function(event, slick, currentSlide){ 21 setInterval(function(){ 22 id_01.setAttribute("startOffset", 2*count_01++); 23 id_02.setAttribute("startOffset", 2*count_02++); 24 },1); 25});

参考にしたサイト

https://tr.you84815.space/slick/events/afterChange.html

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

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

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

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

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

guest

回答1

0

ベストアンサー

setIntervalを使ったSVGアニメーションはメモリをかなり圧迫するので、
requestAnimationFrameを使うのが良いと思います。

setIntervalだとブラウザがフリーズしました…

ついでに描画回数が300回超えたらアニメーションを止める記述も入っています。

もっとスマートに書けそうですし完全ではないと思いますが、
こんな感じかなと思います。

スライドが増える事も考えればデータを配列に入れておいて、
ループで処理する等も考えた方がよいでしょうね。

$(document).ready(function () { $('#slider').slick(); }); var id_01 = document.getElementById('path_01'), id_02 = document.getElementById('path_02'), targetSvg, startOffset, animTime = 0, myReq; var animate = (target) => { animTime += 1; targetSvg.setAttribute('startOffset', startOffset + animTime); if (animTime <= 300) { myReq = requestAnimationFrame(animate); } }; $('#slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { cancelAnimationFrame(myReq); if (currentSlide === 0) { targetSvg = id_02; startOffset = -2150; } else if (currentSlide === 1) { targetSvg = id_01; startOffset = -1530; } targetSvg.setAttribute('startOffset', startOffset); animTime = 0; }); $('#slider').on('afterChange', function (event, slick, currentSlide) { if (currentSlide + 1 === 1) { targetSvg = id_01; } else if (currentSlide + 1 === 2) { targetSvg = id_02; } animate(targetSvg); });

投稿2020/04/21 21:40

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Tmakimaki

2020/04/27 00:28

Lish様 非常に助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問