jQueryで線を描画するSVGアニメーションを実装する方法
jQueryで線を描画するSVGアニメーションを実装する方法をご紹介します。
【更新情報】2021年6月15日
Lazy Line Painterの使い方が変更になり、以下の手順では実装できなくなっています。SVGアニメーションを試されたい方は、DrawSVGを使ったアニメーション実装方法を参考にされてください。（以下記事）
実践jQuery講座 DrawSVGを使ってSVGアニメーションを作る
目次
SVGアニメーションサンプルの紹介
具体的にどういうアニメーションなのか、私が作成した以下のPortFolioサイトを参照ください。
トップページでSVGアニメーションを使っています。
Lazy Line Painterのインストール
今回のアニメーションは、jQueryプラグン「Lazy Line Painter」を使用します。
以下のサイトから’jquery.lazylinepainter-1.7.0.min.js’をダウンロードして、自分のjQueryディレクトリへ保存します。
GitHub
私は、WordPressを使用しているので、functions.phpでダウンロードしたファイルを読み込みます。
(以下実装例：６行目）
|
1 2 3 4 5 6 7 8 |
// スクリプト(jQuery)読み込み function add_script(){ // my scriptの読み込み wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '', true); // 線描画アニメーションjQueryの読み込み wp_enqueue_script('lazylinepainter', get_template_directory_uri() . '/js/jquery.lazylinepainter-1.7.0.min.js', array('jquery'), '', true); } add_action( 'wp_enqueue_scripts', 'add_script' ); |
SVGファイルを作成
次にアニメーションさせたいイラストや文字をSVG形式のファイルで保存します。
私は、illustratorを使ってSVGファイルを作成しました。
SVGファイルの保存方法（illustratorの場合)
まずは、イラストレーターでイラストでも文字でも何でもよいので、アニメーションさせたい素材を作ります。注意すべき点は、テキストボックスで作成した文字は、必ず右クリックで「アウトライン化」しておきましょう。
次に作成した素材をSVG形式で保存します。
ファイルから「別名で保存」を選択します。
ファイル形式で「SVG形式」選択し、「保存」を選択します。
そのままOKで保存を完了させます。
以上でSVG形式のファイルを作成することができました。
SVG TO LAZY LINE CONVERTERでコードを取得
次は、作成したSVGファイルをコードに変換します。
以下のサイトにアクセスします。
Lazylinepainter
「SVG TO LAZY LINE CONVERTER」という画面がありますので、そこに先ほど作成したSVGファイルをドラッグします。
白いスクリーンには、実際にアニメーションが動作し、コードが出力されます。
これをコピーして自分のjQueryファイルへ貼り付けます。（詳細は次章で説明します）
コードの実装
先ほど、「SVG TO LAZY LINE CONVERTER」で変換したソースを自分のjQueryソースへ貼り付けます。
変換されたコードは、pathObjというパス関連の定義と実際にアニメーションさせるための命令lazylinepainterに分けれています。
pathObj部
pathObj部は、jQuery(funtion(){}関数(※readyメソッド）の外に貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
var pathObj = { "createnote": { "strokepath": [ { "path": "M80.2,96.7c-2.5,1.2-7.4,2.4-13.7,2.4C52.4,99.2,41,90,41,71.5c0-17.7,11-28.7,27.1-28.7c6.6,0,10.4,1.4,12.1,2.2l-1.6,5 c-2.5-1.2-6-2.2-10.4-2.2c-12.5,0-21,8.4-21,23.5c0,14.4,7.8,22.9,20.6,22.9c4.2,0,8.3-0.9,11-2.2L80.2,96.7z", "duration": 600 }, { "path": "M106.6,64.2c-0.6-0.1-1.3-0.1-2.2-0.1c-6.5,0-9.8,6.4-9.8,13v21.3h-6V70.9c0-4.2-0.1-8-0.3-11.7h5.3l0.3,7.6h0.2 c1.7-4.9,5.8-8.4,10.7-8.4c0.6,0,1.2,0.1,1.8,0.2V64.2z", "duration": 600 }, { "path": "M141.4,96.7c-2.2,1.1-6.3,2.4-12.3,2.4c-11.4,0-18.3-8.1-18.3-19.8c0-12.3,6.9-21.2,17.5-21.2c12.1,0,15.2,11.1,15.2,17.9 c0,1.4-0.1,2.4-0.1,3.3h-26.7c0.1,10.9,6.3,15,13.3,15c4.9,0,7.8-1,10.3-2L141.4,96.7z M137.6,75c0.1-5.3-2.2-12.2-9.9-12.2 c-7.2,0-10.4,6.8-10.9,12.2H137.6z", "duration": 600 }, { "path": "M178.1,89c0,3.2,0.1,6.6,0.6,9.4h-5.5l-0.6-5h-0.2c-2,3.1-6,5.9-11.6,5.9c-7.5,0-11.4-5.5-11.4-11.2 c0-9.4,8.2-14.5,22.8-14.5c0-3.3,0-10.8-8.9-10.8c-3.4,0-6.9,0.9-9.6,2.8l-1.4-4.1c3.2-2.1,7.6-3.3,12-3.3c11.1,0,14,7.8,14,15.6 V89z M172.2,78c-7.4,0-16.7,1.1-16.7,9.4c0,5,3.2,7.3,6.8,7.3c5.8,0,9.9-4.5,9.9-9.2V78z", "duration": 600 }, { "path": "M191.2,52l5.9-2v9.1h10.2v4.7h-10.2v22.7c0,5,1.5,7.7,5.3,7.7c1.8,0,3-0.2,4-0.6l0.4,4.6c-1.3,0.6-3.3,0.9-5.8,0.9 c-9.5,0-9.8-8.6-9.8-12.8V63.8h-6v-4.7h6V52z", "duration": 600 }, { "path": "M242.9,96.7c-2.2,1.1-6.3,2.4-12.3,2.4c-11.4,0-18.3-8.1-18.3-19.8c0-12.3,6.9-21.2,17.5-21.2c12.1,0,15.2,11.1,15.2,17.9 c0,1.4-0.1,2.4-0.1,3.3h-26.7c0.1,10.9,6.3,15,13.3,15c4.9,0,7.8-1,10.3-2L242.9,96.7z M239.1,75c0.1-5.3-2.2-12.2-9.9-12.2 c-7.2,0-10.4,6.8-10.9,12.2H239.1z", "duration": 600 }, { "path": "M309.6,98.4h-6l-17.5-28.9c-3.7-6.1-7.2-12.2-9.9-18.3l-0.3,0.1c0.5,7,0.6,13.4,0.6,22.9v24.2h-5.6V43.5h6.3l17.7,28.9 c3.9,6.6,7.1,12.2,9.6,17.9l0.1-0.1c-0.6-7.6-0.7-14.2-0.7-22.8V43.5h5.7V98.4z", "duration": 600 }, { "path": "M354.9,78.4c0,14.6-9.6,20.8-18.4,20.8c-10.1,0-17.9-7.6-17.9-20.2c0-13.4,8.4-20.8,18.4-20.8 C347.8,58.2,354.9,66.4,354.9,78.4z M336.8,62.9c-8.5,0-12,8.4-12,15.9c0,8.7,4.8,15.8,11.9,15.8c7.1,0,12.1-7.1,12.1-15.9 C348.8,71.7,345.4,62.9,336.8,62.9z", "duration": 600 }, { "path": "M365.6,52l5.9-2v9.1h10.2v4.7h-10.2v22.7c0,5,1.5,7.7,5.3,7.7c1.8,0,3-0.2,4-0.6l0.4,4.6c-1.3,0.6-3.3,0.9-5.8,0.9 c-9.5,0-9.8-8.6-9.8-12.8V63.8h-6v-4.7h6V52z", "duration": 600 }, { "path": "M417.3,96.7c-2.2,1.1-6.3,2.4-12.3,2.4c-11.4,0-18.3-8.1-18.3-19.8c0-12.3,6.9-21.2,17.5-21.2c12.1,0,15.2,11.1,15.2,17.9 c0,1.4-0.1,2.4-0.1,3.3h-26.7c0.1,10.9,6.3,15,13.3,15c4.9,0,7.8-1,10.3-2L417.3,96.7z M413.5,75c0.1-5.3-2.2-12.2-9.9-12.2 c-7.2,0-10.4,6.8-10.9,12.2H413.5z", "duration": 600 } ], "dimensions": { "width": 480, "height": 154 } } }; |
アニメーション実行部分
アニメーション実行部分は、jQuery(function(){}(※readyメソッド内）に貼り付けます。
svgDataで先ほど定義したsvgデータを設定し、
strokeWidthは、線の太さ、storokeColorは線の色を指定します。
※jQueryのセレクターは、デフォルトで#undefinedです。
|
1 2 3 4 5 6 7 8 |
jQuery(function(){ jQuery('#undefined').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); |
HTMLへの配置
jQueryのセレクターは、デフォルトで#undefinedになっています。自分がアニメーションを配置したい場所このセレクターと一致したidを指定してあげれば、アニメーションが動作します。
|
1 2 |
<div id="undefined"> </div> |
最後に
以上、jQueryで線を描画するアニメーションの実装方法のご紹介でした。
プラグイン「Lazy Line Painter」を使用することで簡単に実装することができますので、
動きのあるページを作りたいときは試してみたはどうでしょうか？
少しでも参考になれば幸いです。
それでは！
スポンサーリンク
