サイト制作に関するメモ書き

HOME > JavaScript > jQuery > SVG画像をアニメーションで表示させる

SVG画像をアニメーションで表示させる

イラストレーターで作成したSVG画像を、アニメーションで表示するように変換するオンラインツールを試してみました。
Lazy Line Painter

SVG画像を作成する

イラストレーターで適当に画像を作成します。

svg-animation01

作成が完了したら、 ファイル > 別名で保存 を選択。

svg-animation02

ファイルの種類をSVGにして、保存を選択。

svg-animation03

SVGオプションを以下のように設定して、OKを選択。

svg-animation04

これでSVG画像の作成が完了しました。
 

SVG画像を変換する

Lazy Line Painterへアクセスします。

svg-animation05

ページ下部にある「SVG TO LAZY LINE CONVERTER」に、先ほど作成したSVG画像をドラックします。

svg-animation06

SVG画像がアニメーション付きで表示されます。
アニメーションの順番は、イラストレーターで作成したレイヤーの順番になるようです。

svg-animation07

こちらで問題なければ、その下にあるコードをコピーします。

svg-animation08

これで変換完了です。
 

変換したコードをページに埋め込む

出力したコードの他に、別途ファイルを読み込ませる必要があります。
ページ上部にある「DOWNLOAD FROM GITHUB」をクリックして、GitHubへアクセスします。

svg-animation09

右側の「Download ZIP」からファイルをダウンロードします。

svg-animation10

ダウンロードしたファイルを解凍して、jQueryと一緒に読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.lazylinepainter-1.5.1.min.js"></script>
<script src="./sample.js"></script>

sample.jsに先ほど変換したコードを追加しています。

参考にしたサイトを見ているとRaphaëlも読み込むようになっているのですが、
GitHubからダウンロードしてきたファイルだとRaphaëlを読み込ませないで使用しているので、
今回は読み込ませないで使用しています。

HTML

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

#testにSVG画像を表示するように設定します。

JavaScript

/* 
 * Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 
 
var pathObj = {
    "test": {
        "strokepath": [
            {
                "path": "M 456.5,195. L 756.5,195.5 456.5,495.5 z",
                "duration": 600
            },
            {
                "path": "M 544.3,133. L 332.2,345.9 756.8,345.6 z",
                "duration": 600
            },
            {
                "path": "M 606.3,195. L 306.3,195.5 606.8,495.5 z",
                "duration": 600
            },
            {
                "path": "M173,62c0,0,19,56,23,92s17.9,249,53.9,295S396,557,474,538  s153-40,174-96s50-140.3,50-140.3",
                "duration": 600
            },
            {
                "path": "M 704 230 L 738 280",
                "duration": 600
            },
            {
                "path": "M 738 198 L 766 239",
                "duration": 600
            },
            {
                "path": "M267,88c0,0,37-57,60-59s73,71,73,71",
                "duration": 600
            },
            {
                "path": "M333.5,133c0,0-4.5,91-16.5,87s-76-37-66-58s70-42,89-39  s78,49,68,70",
                "duration": 600
            },
            {
                "path": "M498,88c0,0,36-59.1,64-59s89,58,95,66",
                "duration": 600
            },
            {
                "path": "M585,132c0,0-18,87.3-39,88.1c-21,0.9-45-21.1-48-32.1s13-54,25-61  s108-15,116,8s27,64,18,76",
                "duration": 600
            },
            {
                "path": "M438,239c7,4,18,16,16,24s-35,78-31,90s34,45,64,21s31-47,27-54",
                "duration": 600
            },
            {
                "path": "M395,293c15,0,102.6-10,102.6-10",
                "duration": 600
            },
            {
                "path": "M 388 339 L 485 326",
                "duration": 600
            },
            {
                "path": "M363,432c0,0,62.6-28,83.3-28S551,457,551,457",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 960,
            "height": 560
        }
    }
}; 
 
 
/* 
 Setup and Paint your lazyline! 
 */ 
$(function() {
	$('#test').lazylinepainter({
		"svgData": pathObj,
		"strokeWidth": 2,
		"strokeColor": "#e09b99"
	}).lazylinepainter('paint');
});

1~75行目までが取得したコード、78~87行目が処理を実行するための記述になります。
詳細な使い方は、先ほどダウンロードしたGitHubに記載されています。

SVG画像をアニメーションで表示させるデモページ
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP