Home > Javascript > Lazy Line Painterで簡単に線のSVGアニメーションを作る
Home > Others > Lazy Line Painterで簡単に線のSVGアニメーションを作る

Lazy Line Painterで簡単に線のSVGアニメーションを作る

公開日:

最終更新日:

lazylinepaintereyecatch

やってみると驚く程簡単に、オシャレイな線のアニメーションが実装できたので、その覚え書きです。

『オシャレだね~』なカフェイとか雑貨屋さんとかそんなサイトに使えそうだなってなります。

SVGのアニメだとsnapとかいいですけど、線のアニメーションならこれが簡単でオススメイです。

はい。分かりにくいと思うのでサンプルです

ボタンを押すと動き出します。

使い方

SVGファイルを用意します。

イラストレーターでsvg保存しました。

svgimage

lazylinepainter.jsをダウンロード

まず、Lazy Line PainterのGitHubから、ファイルをダウンロードします。

右のダウンロードからダウンロードできます。

ちなみに使うのは『jquery.lazylinepainter-1.7.0.min』です。(ここはダウンロードの時のバージョンによってかわります。)

lazy line painter github image

headにjsファイルを読み込ませる

HTMLのhead部分にjQueryとダウンロードした『jquery.lazylinepainter-1.7.0.min』を読み込ませます。

divタグを作る

任意のidを付けてdivタグを作ります

今回はlazyidと付けました。

SVGを変換する

Lazy Line Painterのサイトの下の画像部分に作ったSVGファイルをドラッグ&ドロップします。

するとドラッグ&ドロップした部分の下にコードが出てくるので、コードをコピーします。

Lazy Line Painter site image

コピーしたコードを使う

コピーしたコードをbody前にscriptタグを作って貼り付ける。

IDと合わせる

上の方の”lazylinepainter”部分(多分svgのファイル名と同じになってます)と、下の方の#undefinedをさっき作ったdivのidと合わせます。

今回はlazyidです。

これで完成です!!簡単ですね!!映画って本当にいいもんですね。

オプションの設定

線の太さや色など結構色々な設定できるので、変えたい方はこちらをご参考くださいませ。

(太さと色はデフォルトで設定が入ってます。)

ちなみに場所はさっきidを変えた下の方らへんにあります。

線の設定

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

アニメーションの設定

これは関数にして書いてください。

  • ‘onComplete’ // アニメーションが終わった後に何かする
  • ‘onUpdate’ // アニメーションがアップデートした時に何かする
  • ‘onStart’ // アニメーションが始まった時に何かする
  • ‘onStrokeStart’ // それぞれの線の開始時に何かする
  • ‘onStrokeComplete’ // それぞれの線の終了時に何かする

その他の設定

  • ‘delay’ // アニメーションの開始を遅らせる (ミリ秒)
  • ‘overrideKey’ // 何個か設置する時にさっき合わしたidが合わなくなるので使います。(新しいdivを作るとidを変えないとダメなので、これで上書きして使います。)
  • ‘speedMultiplier’ // アニメーションのスピード (ミリ秒)
  • ‘drawSequential’ // true: 線を順番に描画, false: 一気に描画
  • ‘reverse’ // trueで逆
  • ‘ease’ // イージングの設定 (多分jQuery Easing Pluginのイージング)

GitHub見ると色々書いてるので、参考にしてみてください。

Comment

よろしければコメントをどうぞ