イラストレーターで作成したSVG画像を、アニメーションで表示するように変換するオンラインツールを試してみました。
Lazy Line Painter
SVG画像を作成する
イラストレーターで適当に画像を作成します。
作成が完了したら、 ファイル > 別名で保存 を選択。
ファイルの種類をSVGにして、保存を選択。
SVGオプションを以下のように設定して、OKを選択。
これでSVG画像の作成が完了しました。
SVG画像を変換する
Lazy Line Painterへアクセスします。
ページ下部にある「SVG TO LAZY LINE CONVERTER」に、先ほど作成したSVG画像をドラックします。
SVG画像がアニメーション付きで表示されます。
アニメーションの順番は、イラストレーターで作成したレイヤーの順番になるようです。
こちらで問題なければ、その下にあるコードをコピーします。
これで変換完了です。
変換したコードをページに埋め込む
出力したコードの他に、別途ファイルを読み込ませる必要があります。
ページ上部にある「DOWNLOAD FROM GITHUB」をクリックして、GitHubへアクセスします。
右側の「Download ZIP」からファイルをダウンロードします。
ダウンロードしたファイルを解凍して、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に記載されています。
【参考サイト】
コメントが承認されるまで時間がかかります。