LAZY LINE PAINTER を使った SVGアニメーション

JQueryのプラグインを使用していい感じのSVGアニメーションがつくれみたいだったので、試してみました。

近頃インタラクティブな実装方法を、身につけたいと思っていて惹かれたJQueryです。

思った以上にとっても簡単にできておすすめ!

lazy_line_painter_main

demo

こんな感じで、まるで書いているみたいな動きをつけることができます。

LAZY LINE PAINTER

作り方
1.Illustratorでsvgデータを作成する
2.LAZY LINE PAINTERでJsを作る
3.HTMLを書く
4.補足

Illustratorでsvgデータを作成する

svg_illustration

svg_setting

このとき、書いた順番でアニメーションが作成されます。

LAZY LINE PAINTERでJsを作る

LAZY LINE PAINTER
のサイトの下の方にある
コンバーターにsvgをドラックするかクリックしてファイルを選択し
Jsデータに変換する

converter

このような画面に切り替わりアニメーションが確認できる

Jsをコピーする

HTMLを書く

補足

今回ここでは、紹介しませんがオプションを使うことによって
点線にしたり、透明度を変えたりカスタマイズすることができます。

参考にさせていただいた記事
SVGとjQueryで絵を描いているようなアニメーションを実装する方法

SVGロゴの線がうねうねするやつ

流行のSVGアニメを手軽に作れるLazy Line Painter

コメントを残す