jQueryで線を描画するSVGアニメーションを実装する方法

jQueryで線を描画するSVGアニメーションを実装する方法をご紹介します。

【更新情報】2021年6月15日
Lazy Line Painterの使い方が変更になり、以下の手順では実装できなくなっています。SVGアニメーションを試されたい方は、DrawSVGを使ったアニメーション実装方法を参考にされてください。（以下記事）

実践jQuery講座 DrawSVGを使ってSVGアニメーションを作る

SVGアニメーションサンプルの紹介

具体的にどういうアニメーションなのか、私が作成した以下のPortFolioサイトを参照ください。
トップページでSVGアニメーションを使っています。

SVGアニメーションサンプル

Lazy Line Painterのインストール

今回のアニメーションは、jQueryプラグン「Lazy Line Painter」を使用します。
以下のサイトから’jquery.lazylinepainter-1.7.0.min.js’をダウンロードして、自分のjQueryディレクトリへ保存します。
GitHub

私は、WordPressを使用しているので、functions.phpでダウンロードしたファイルを読み込みます。
(以下実装例：６行目）

// スクリプト(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メソッド）の外に貼り付けます。

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です。

 jQuery(function(){
 jQuery('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

HTMLへの配置

jQueryのセレクターは、デフォルトで#undefinedになっています。自分がアニメーションを配置したい場所このセレクターと一致したidを指定してあげれば、アニメーションが動作します。

<div id="undefined">
</div>

最後に

以上、jQueryで線を描画するアニメーションの実装方法のご紹介でした。
プラグイン「Lazy Line Painter」を使用することで簡単に実装することができますので、
動きのあるページを作りたいときは試してみたはどうでしょうか？
少しでも参考になれば幸いです。

それでは！