今回は、線画を描いていくSVGアニメーションを簡単に実装できる、Lazy Line PainterというjQueryプラグインの使い方を紹介します。
DEMO
まずはDEMOをご覧ください。こんな感じのアニメーションが作れます。
使い方
以下のような手順で実装できます。
- IllustratorなどでSVGを作成する
- JSファイルをHTMLに読み込ませる
- Lazy Line PainterのサイトでSVGファイルからコードを生成する
- 3のコードをHTMLに記述する
1. IllustratorなどでSVGを作成する
まずは、アニメーションさせたいSVGを作成します。Illustratorの場合は、ファイル＞書き出し などでSVG形式の画像を書き出すことができます。
Lazy Line Painterで出来るのは線画のアニメーションなので、塗り無しの線画にしておきます。
2. JSファイルをHTMLに読み込ませる
読み込みが必要なファイルは、jQuery本体とLazy Line PainterのJSファイルの2つだけです。Lazy Line PainterのJSファイルは、GitHubからダウンロードします。
Lazy Line Painterのダウンロードページ｜GitHub
（右の方の緑のボタンからZIPファイルがダウンロードできます。）
ZIPの中には色々なファイルが入っていますが、必要なのは「jquery.lazylinepainter-1.7.0.min.js」だけです。
以下のようなコードを、HTMLのhead要素内かbodyの終了タグの直前に書いて読み込ませます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script>3. Lazy Line Painterのサイトでコードを生成する
上記サイトにアクセスし、「Click or Drop your SVG file here to be converted」と書いてある赤い枠の中にSVGファイルをドロップします。
すると、アニメーションのプレビューとコードが生成されます。アニメーションの順番は、背面にあるオブジェクトから先に描画されるようになっています。
アニメーションを確認したら、上の画像の青枠で囲った部分（Copy data to clipboard）をクリックしてコードをコピーします。
4. 3のコードをHTMLに記述する
手順2で書いたscript要素の下に新しくscript要素を作り、手順3でコピーしたコードをペーストします。その際、以下の2箇所を同じ文字列に変更してください。
SVGオブジェクトのキー
var pathObj = {
"SVG_sample": { //この部分がキー（SVGのファイル名になっている）
"strokepath": [lazylinepainter実行場所を指定するセレクタ（ID名）
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#undefined').lazylinepainter( //IDの #undefined を上のキーと同じにする
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});この2つを同じ名前にします。キーとIDが同じであればデフォルトの名前を使わなくても大丈夫です。
その他
以上のような手順でSVGアニメーションが実装できます。
また、SVGから生成したコード中の「Setup and Paint your lazyline!」の部分で線の太さや色を変更したり、アニメーション前後の動きなどをオプションで指定することができます。
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#undefined').lazylinepainter(
"svgData": pathObj,
"strokeWidth": 2, //線の太さ
"strokeColor": "#e09b99" //線の色
}).lazylinepainter('paint');
});どんなオプションが使えるかはGitHubで確認できます。
また、SVGのコードの「”duration”」の部分で、パスの描画にかける時間を設定できます。単位はミリ秒です。
簡単に実装できるので、ぜひ使ってみてください。
