超簡単な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本体を読み込ませていない場合は、この段階で読み込みをさせておいてください。)

 

 

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

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

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

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

 

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

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

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

 

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

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

DEMOはこちらになります。

 

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

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

 

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

 

 


More Design Freedom

デザイン・イラストのご依頼はgluck designにて承っております。
サイトを作ったけど集客がうまくいかない、広告チラシを作ったけどいまいちデザインに納得がいかない…などのお悩みを一緒になって解消しませんか?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.

ABOUTこの記事をかいた人

デザイン会社で計7年間つとめ、デザインやディレクション、CG制作やWEB制作等のクリエイティブを経験し、その経験を活かしクリエイティブの可能性を最大限発揮できるよう常に新しい知識・技術を学んでいます。 ガジェット、デザイン知識・素材などの紹介や気になることを記事にしていきます。