超簡単なSVGアニメーション！Lazy Line Painter

今回はデザインの現場でよく目にするアニメーションを導入する方法をご紹介します。

このサイトのサービスを利用することで、簡単にSVGでのアニメーションが実現します。

無料で利用することができるのも嬉しいですね！

まずは公式サイトの説明にもある通り、

Githubのサイトからアニメーションで使用するjQueryをダウンロードしておきましょう。

「jquery.lazylinepainter-1.7.0.min.js」の方を使用します。

公式サイト「Lazy Line Painter」

JSファイルダウンロード先「Github」

STEP1.アニメーションさせたいSVGファイルを用意する

まずは実際にアニメーションさせたいファイルをSVGで用意します。

使用しているソフトはAdobe Illustrator CCですが、

inkscapeなどのソフトでも問題ありません。

保存形式はSVGファイルで、画像を参考にしてみてください。

今回サンプルで使用するのはこの画像です。

STEP2.用意したSVGをLazy Line Painterで変換する

STEP1で用意した画像を公式サイトのサービスを使用して、

JSファイルに変換します。この工程を終えると用意したSVGは以降使用しません。

公式サイトのドロップゾーンにSVGファイルをD&Dしましょう。

変換が始まり、アニメーションが書き出されます。

その下にコードが吐き出されるので、コピーしておきましょう。

（変換するファイルは縦横で1000px × 1000px、40kb以下の制限があるので注意が必要です。）

STEP3.変換したコードをJSファイルで保存

上記のSTEP2でコピーしておいたコードをJSファイルとして保存します。

僕の場合はAtomというソフトでJSファイルで保存していますが、

使いやすいソフトでも問題ありません。

今回は「SVG_animated.js」という名前で保存しています。

前段階で用意しておいた「jquery.lazylinepainter-1.7.0.min.js」をHTMLに読み込ませます。

以下のように、headタグ内に、「lazylinepainter-1.5.1.min.js」を読み込みさせます。

（jQuery本体を読み込ませていない場合は、この段階で読み込みをさせておいてください。）

<script src="jquery.lazylinepainter-1.5.1.min.js"></script>

「SVG_animated.js」も読み込みさせるのですが、その前にファイル自体に修正を加えます。

var pathObj = {
    "hacker_logo_line": {

 $(document).ready(function(){ 
 $('#undefined').lazylinepainter(

上記のコードの「hacker_logo_line」の部分と「undefined」の部分の名前を同一にします。

今回の場合は「hacker_logo_line」にして先に進みます。

ファイルの修正を終えたら、こちらのJSファイルもheadタグの内に読み込みさせます。

<script src="SVG_animated.js"></script>

これで下準備が終わりました。では実際に動かしてみましょう。

HTMLな内にアニメーションを入れたい箇所にタグを挿入します。

先ほど名前を同一にしたものがidタグになるので今回は以下のようになります。

<div id="hacker_logo_line"></div>

これで手順は終了となります。

実際に動いているかチェックしましょう！

DEMOはこちらになります。

番外編.オプションで細かの調整も可能

• ‘strokeWidth’ // 太さ
• ‘strokeColor’ // 色
• ‘strokeCap’ // 端っこの形 – butt (線の端まで描画) | round (線の端を丸めます) | square (線が突出します)
• ‘strokeJoin’ // 角の形状 – miter (平らな角) | round (丸い角) | bevel (尖がった角)
• ‘strokeOpacity’ // 透明度 0 – 1 (0が透明で1が透明じゃない)
• ‘strokeDash’ // 点線 – ‘5, 5’ (線分, 間隔)

公式のGithubにこの他の設定の仕方も記載があるので参考にしてみてはいかがでしょうか。