SVGを手書きしているようなアニメーションを作れるjQueryプラグン「Lazy Line Painter」!

2014/11/26

こんにちは。
今回はSVGを手書きしているようなアニメーションを作れるjQueryプラグン「Lazy Line Painter」の紹介をしたいと思います。

前から存在は知っていたのですが、この前やっと使う事があったので紹介します。

 

DEMOはこちら

 

ダウンロードしてみよう!

GitHubからLazy Line Painterをダウンロードします。

 

設置してみよう!

先ほど、ダウンロードしたファイルを設置していきます。
jQuery本体とraphael-min.jsとjquery.lazylinepainter-1.4.1.min.jsを/bodyの手前に読み込みます。

 

SVGを作ってみよう!

まずはSVGを作ります。
イラストレーターでイラスト又は文字を書きます。
文字の場合はアウトラインにします。
別名保存でSVGまたはSVG圧縮を選択します。

lazy_line_painter2

 

SVGをアニメーションにしてみよう!

下記のサイトにアクセスします。

 

Lazy Line Painter

lazy_line_painter

http://lazylinepainter.info/

 

下のほうにいくと下記のような画面があるのでその中に先程作ったSVGをドラッグドロップします。

lazy_line_painter3

 

赤、緑、青のスライダーで線の色を変更できます。
一番下の黒のスライダーで線の太さを調節できます。
調整が終わったら「Copy data to clipboard」をクリックしてコピーします。

lazy_line_painter4

 

先程、設置したjQuery等の一番下に設置します。

 

htmlは空のdivタグに上記のスクリプトと同じid名を付けます。

 

オプションを設定してみよう!

先程コピーしてきたスクリプトの下の方に下記ような記述があると思いますが、ここでオプションを設定できます。

 

オプション一覧

strokeWidth
線の太さを設定できます。
strokeColor
線の色を設定できます。
strokeCap
線の形状を設定できます。
butt、round、squareから選択できます。
strokeJoin
線の繫ぎ目を設定できます。
miter、round、bevelから選択できます。
strokeDash
線を点線に設定できます。
“”, “-“, “.”, “-.”, “-..”, “. “, “- “, “–“, “- .”, “–.”, “–..”から選択できます。
strokeOpacity
線の透明度を設定できます。
透明度を70%にしたい場合は、「.7」jと記述します。
onComplete
線のアニメーションが終わった後のアニメーションを設定できます。
delay
アニメーションを開始する時(秒)を設定できます。
overrideKey
キーを変更する事ができます。
同一ページ内に複数表示させたい時等に使えます。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。お手軽にアニメーションさせる事ができるのでおすすめです。
以上でSVGを手書きしているようなアニメーションを作れるjQueryプラグン「Lazy Line Painter」の紹介でした。

topへ戻る