実践jQuery講座 DrawSVGを使ってSVGアニメーションを作る
どうもこんにちは！InomaCreateのkoheiです。
今回は、jQueryのDrawSVGというライブラリを使って、SVGアニメーションを作る方法を紹介します。
目次
解説動画
動画解説もあります。記事と合わせてどうぞ！
1.SVGファイルを作る
まず、アニメーションさせたい文字、図のSVGファイルを作る必要があります。
SVGファイルとは・・・Scalable Vector Graphics
SVGはXMLをベースにした二次元ベクターデータ
このベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって再現する方式」であり、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っています。
今回は、アドビのイラストレーターを使って、SVGファイルを作ります。
※GIMPや無料のWebツールでもSVGファイルが作れるようです。やり方が分かったらまた記事にしたいと思います。
イラストレーターを開いて、テキストツールでアニメーションさせたい文字を書きます。(今回は文字のアニメーションを例にします）
※このとき、塗りは無しにしておいてください。（塗りが有りだとDrawSVGのアニメーションが動作しませんでした。）
文字を選択した状態で、右クリックして、アウトラインを作成をクリックします。
ファイル→書き出し→書き出し形式を選択します。
ファイル形式を「SVG」に設定して、書き出しを押します。
SVGオプションでOKを押します。
2.DrawSVGを使って、SVGアニメーションさせるコードを作る
アニメーションさせたいSVGファイルができたら、次は実際にコードを書いていきます。
練習素材ダウンロード
今回、サンプルの練習素材をダウンロードできるようにしていますので、以下からダウンロードしてやってみてください。
2-1.DrawSVGを読み込む
次にアニメーションさせるためのライブラリをダウンロードします。
今回は、DrawSVGというライブラリを使います。以下のサイトから、ZIPファイルをダウンロードしてきましょう。
ダウンロードしたら、解凍し、「jquery.drawsvg.js」というファイルがありますので、実装するコード環境のjsフォルダへコピーしましょう。
index.htmlを開き、以下を追加しDrawSVGのスクリプトファイル（jquery.drawsvg.js）を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/jquery.drawsvg.js"></script> <script src="js/my_script.js"></script> </head> |
2-2.SVGファイルのコードを貼り付ける
次に、アニメーションさせたいSVGファイルをエディタで開き、index.htmlファイル内に貼り付けます。
※今回のサンプルのSVGファイルは、sample/images/内に置いてます。
|
1 2 3 4 5 6 7 8 9 |
<body> <div class="container"> <main> <h1>SVGアニメーションサンプル</h1> <svg id="svg_animation" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412.57 110.57"><defs><style>.cls-1{fill:none;stroke:#000;}</style></defs><path class="cls-1" d="M19.25,100.72l3.4-27.65h6.56Q30,84.32,35.8,90.21t12.63,5.88A11.42,11.42,0,0,0,59.5,85,13.16,13.16,0,0,0,57.22,78q-2.3-3.6-9-9.52Q40,61.17,36.91,56.1a21.61,21.61,0,0,1-3.13-11.63,22.71,22.71,0,0,1,7.44-17.31,25.06,25.06,0,0,1,17.7-6.95,22.11,22.11,0,0,1,17.63,8.15,18.86,18.86,0,0,0,4-6.5H87L83.53,45.59H77.31q-1.75-9.86-6.76-14.33a16.26,16.26,0,0,0-11.11-4.48,11.5,11.5,0,0,0-7.17,2.55A8.52,8.52,0,0,0,49,36.5a13.55,13.55,0,0,0,2.16,7.12q2.18,3.56,9,9.47a117.33,117.33,0,0,1,9.52,9,24.86,24.86,0,0,1,4.54,7.59,25.88,25.88,0,0,1,1.76,9.52,23.58,23.58,0,0,1-6.77,16.52Q62.37,103,51,103a28,28,0,0,1-21.16-9,21.2,21.2,0,0,0-4,6.74Z" transform="translate(-18.68 -19.71)"/><path class="cls-1" d="M117.63,90.06q-10.14,13.06-19.87,13.06a10.54,10.54,0,0,1-7.58-3.22q-3.32-3.23-3.31-10,0-13.53,9.55-25.6t21.79-12.07a8.17,8.17,0,0,1,6,2.08,10,10,0,0,1,2.61,6.3l2-7.27h16.76L135,87.77a30.47,30.47,0,0,0-1,3.69,1.46,1.46,0,0,0,1.64,1.65q3,0,6-5.34h6.5A23.8,23.8,0,0,1,139.78,99a20.42,20.42,0,0,1-12.19,4.1,11.7,11.7,0,0,1-7.38-2.31c-2-1.54-3-4-3-7.41A16.6,16.6,0,0,1,117.63,90.06ZM104.5,87.25a6.16,6.16,0,0,0,.85,3.54A2.93,2.93,0,0,0,107.9,92q2.64,0,6.12-3.6t6.8-12.31q3.32-8.7,3.31-12.68a6.66,6.66,0,0,0-.94-3.93,3.24,3.24,0,0,0-2.81-1.29q-5.91,0-10.9,11.46T104.5,87.25Z" transform="translate(-18.68 -19.71)"/><path class="cls-1" d="M154.42,101.31l10.73-35a19.71,19.71,0,0,0,1-4.57,1.67,1.67,0,0,0-.41-1.23,1.63,1.63,0,0,0-1.23-.41c-1.25,0-2.62.93-4.1,2.81a21.18,21.18,0,0,0-3.17,5.16h-5.8q8.26-16.65,21.33-16.64a11.41,11.41,0,0,1,7.68,2.46,8.09,8.09,0,0,1,2.87,6.44,35.59,35.59,0,0,1-2.11,10.26q12.08-19.17,26.84-19.16a12.88,12.88,0,0,1,8.49,2.84q3.47,2.84,3.46,8.76a34.77,34.77,0,0,1-1.41,8.55q13.25-20.16,29-20.15a13.68,13.68,0,0,1,8.11,2.34A7.3,7.3,0,0,1,259,60.06a26.25,26.25,0,0,1-1.4,7l-5.92,19.34a39.74,39.74,0,0,0-1.35,4.74,1.5,1.5,0,0,0,1.7,1.7,5.64,5.64,0,0,0,3.63-1.61,19.69,19.69,0,0,0,3.81-4.83H266a28.74,28.74,0,0,1-9.55,11.34,22.13,22.13,0,0,1-12.66,4.13A12.62,12.62,0,0,1,236,99.43a7.55,7.55,0,0,1-3.26-6.38,28.32,28.32,0,0,1,1.47-6.68l5.39-17.52a16.3,16.3,0,0,0,.88-4c0-1.71-.94-2.57-2.81-2.57q-6.1,0-15.21,11.63a70.73,70.73,0,0,0-12.92,27.39H192.33l9.09-29.71a21.9,21.9,0,0,0,1.23-5.74,3.88,3.88,0,0,0-.88-2.78,3.51,3.51,0,0,0-2.64-.91q-5.69,0-13.83,11.19t-13.47,28Z" transform="translate(-18.68 -19.71)"/><path class="cls-1" d="M291.06,97.44l-5.91,19.45a14.09,14.09,0,0,0-.82,3.64q0,3.45,7.09,3.45h3l-1.81,5.81H254.74l1.75-5.81c3.91,0,6.54-.47,7.89-1.43s2.64-3.47,3.89-7.53L283.1,66.56a19.78,19.78,0,0,0,1-4.27,2.41,2.41,0,0,0-.47-1.65,1.86,1.86,0,0,0-1.46-.52q-3.81,0-8.79,8.67h-6.8q8.61-17.34,22.74-17.34c4.25,0,7.13.91,8.61,2.75s2.23,4.39,2.23,7.68q8.14-10.44,18.57-10.43,6.91,0,10.34,5.18a22.15,22.15,0,0,1,3.43,12.51A35.58,35.58,0,0,1,323.79,93q-8.7,10.16-20.07,10.16a17.07,17.07,0,0,1-7.15-1.43A15.18,15.18,0,0,1,291.06,97.44Zm3.05-7.56q0,3.87,1.76,5.31a5.78,5.78,0,0,0,3.69,1.43q2.93,0,6.21-3.6T312,80q3-9.37,3-14.42A6.81,6.81,0,0,0,314,61.73,3.34,3.34,0,0,0,311,60.12q-3.51,0-7.38,4.57T297,78.43Q294.12,87.6,294.11,89.88Z" transform="translate(-18.68 -19.71)"/><path class="cls-1" d="M367.53,87.48h6a26.76,26.76,0,0,1-8.62,11.07,21.59,21.59,0,0,1-13.59,4.57q-5.1,0-8-2.25a7.35,7.35,0,0,1-2.9-6.12q0-1.53,2.34-9.79l15.12-49.45a20.29,20.29,0,0,0,1.06-4.46q0-3.11-7-3.1l1.82-6.09q14.35,0,20.68-1.65H380L359.09,88.42a18.28,18.28,0,0,0-.94,3.81c0,1.25.73,1.87,2.17,1.87Q363.79,94.1,367.53,87.48Z" transform="translate(-18.68 -19.71)"/><path class="cls-1" d="M396.47,83.2a13.24,13.24,0,0,0-.52,3.58c0,3.08.66,5.41,2,7s3.32,2.34,6,2.34a17,17,0,0,0,8.23-2.31,35.62,35.62,0,0,0,8.52-6.94h7.8a37.69,37.69,0,0,1-13,11.6,36.59,36.59,0,0,1-18.19,4.68q-8.5,0-14-3.74t-5.48-11.67q0-12.83,12.54-24.55T417.8,51.45q6.51,0,9.73,2.4t3.22,7.2q0,7.62-9.43,13.74T396.47,83.2Zm1.35-6.15A23.85,23.85,0,0,0,410.6,70.9q5.63-5.1,5.62-10a3.78,3.78,0,0,0-.88-2.73,3.51,3.51,0,0,0-2.63-.9q-4.17,0-8.15,5.27T397.82,77.05Z" transform="translate(-18.68 -19.71)"/></svg> </main> </div> </body> |
ここで、idは、”svg_animation”にしておきます。後ほど、jQuery側の処理で、このid名を指定します。
2-3.アニメーション処理を記載
続いて、実際にアニメーションさせる処理を記載します。
jsフォルダ内のmy_script.jsに以下のように記載しましょう。
|
1 2 3 4 5 6 |
$(function(){ var mySVG = $('#svg_animation').drawsvg(); mySVG.drawsvg('animate'); }); |
3行目で指定しているidは、svgタグのid（svg_animation)です。
上記を記載すれば、SVGアニメーションが動作します。
2-4.オプション設定
DrawSVGには、以下のようなアニメーションのオプション設定あります。
| オプション名 | 説明 |
|---|---|
| duratioin | 各パスのアニメーション完了時間(ms) |
| stagger | 各パスのアニメーションを遅らせる時間(ms) |
| easing | アニメーションのイージング機能設定（動きの加減速) |
| reverse | 線を引く方向 |
| callback | アニメーション完了後に呼び出す関数 |
試しに、以下のように処理を変更して、ブラウザで表示を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function(){ var mySVG = $('#svg_animation').drawsvg( { duration: 1000, stagger: 1000, easing: 'swing', reverse: false, callback: function() { // アニメーションが完了したときの処理 console.log("animation finish!!"); } }); mySVG.drawsvg('animate'); }); |
durationとstaggerを同じ時間に設定しているので、1つのパスのアニメーションが終わってから次のパスのアニメーションが始まるようになったと思います。
easingは、swingとlinearが選択できるようですが、linearにすると、パスの角に隙間ができたりしてあまり良い動きではなかったです。
callbackはアニメーションが終わったときに、何か別の処理をさせたいときに記載します。今回はとりあえずコンソールにログを出してみました。
他にも色々試して動かしてみると楽しいと思います。
最後に
今回は、DrawSVGというライブラリを使って、SVGアニメーションの実装方法を紹介しました。
アニメーションを入れることで印象的なサイトが作れると思いますので、ぜひ皆さんもDrawSVG使ってみてください。
それでは！！
スポンサーリンク
