1. HOME
  2. フロントエンド
  3. SVGアニメーション「Lazy Line Painter」

SVGアニメーション「Lazy Line Painter」

フロントエンド

まずはダウンロードと読み込み

今回アニメーションで使うのは「Lazy Line Painter」です。
まずGitHubからダウンロードをします。
ダウンロードが出来たらzipファイルを解凍し、
HTML上にjQuery本体とLazy Line Painterを設置します。(</body>の前がおすすめ)

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.lazylinepainter-1.7.0.min.js"></script>

SVG形式の画像を用意しましょう

SVG形式で画像を用意します。
Illustratorでイラストorテキストを書いてSVGで保存します。
テキストの場合はアウトライン化をしておいてください。
選択した状態で
メニューバー【書式(type)→アウトラインを作成(Create Outlines)】
(mac ショートカット【command + shift + O】)

今回はアウトライン化したテキストを用意しました。↓


アニメーションに変換!


Lazy Line Painterのサイトにアクセスします。
下にいくとSVG TO LAZY LINE CONVERTERと書かれたスペースがあるのでそこにSVGをドラッグ&ドロップまたはクリックで選択。


下にコードが出るのでそれをコピーして自分のHTML上か、jQuery用のファイルに貼り付けます。


HTML上で設置したい部分に空divを置き、先ほどコピーしたソースと同じid名を空divにつけます。


<div id="test"></div>

おまけ(オプションでスタイルを変更)


ソース下部のsvgDataと書いてある部分でスタイルが変更できます。

strokeWidth線の太さ
strokeColor線の色
strokeDash線を点線にする
strokeCap線の先端の形状(butt,round,square)
strokeOpacity線の透明度を0から1で指定
delayアニメーション開始速度(ミリ秒指定)
overrideKeykeyの上書き変更
onComplete描画完了後にjQueryで動かす。【 : 】のあとにfunctionを書く

デモはこちら(別ウィンドウが開きます)


svg
アニメーション
jQuery

この記事を読んだ方におすすめ