Lazy Line Painterで簡単に線のSVGアニメーションを作る
やってみると驚く程簡単に、オシャレイな線のアニメーションが実装できたので、その覚え書きです。
『オシャレだね～』なカフェイとか雑貨屋さんとかそんなサイトに使えそうだなってなります。
SVGのアニメだとsnapとかいいですけど、線のアニメーションならこれが簡単でオススメイです。
はい。分かりにくいと思うのでサンプルです
ボタンを押すと動き出します。
使い方
SVGファイルを用意します。
イラストレーターでsvg保存しました。
lazylinepainter.jsをダウンロード
まず、Lazy Line PainterのGitHubから、ファイルをダウンロードします。
右のダウンロードからダウンロードできます。
ちなみに使うのは『jquery.lazylinepainter-1.7.0.min』です。（ここはダウンロードの時のバージョンによってかわります。）
headにjsファイルを読み込ませる
HTMLのhead部分にjQueryとダウンロードした『jquery.lazylinepainter-1.7.0.min』を読み込ませます。
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.lazylinepainter-1.7.0.min.js"></script> |
divタグを作る
任意のidを付けてdivタグを作ります
今回はlazyidと付けました。
|
1 |
<div id="lazyid"></div> |
SVGを変換する
Lazy Line Painterのサイトの下の画像部分に作ったSVGファイルをドラッグ&ドロップします。
するとドラッグ&ドロップした部分の下にコードが出てくるので、コードをコピーします。
コピーしたコードを使う
コピーしたコードをbody前にscriptタグを作って貼り付ける。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<script> (function($) { /* * Lazy Line Painter - Path Object * Generated using 'SVG to Lazy Line Converter' * * http://lazylinepainter.info * Copyright 2013, Cam O'Connell * */ var pathObj = { "lazylinepainter": { "strokepath": [ { "path": "M243.114,283.036c0,0-8.994-8.993-11.872-11.871 c-2.878-2.879,2.159-4.677,2.159-7.914c0-3.238-3.957-21.585-3.957-25.182c0-3.598,0-28.42,0-28.42s-13.311-16.548-13.311-18.706 c0-2.159,7.555-11.872,10.073-14.39c2.519-2.518,11.512-17.988,11.512-17.988s-2.159-22.664,0-24.822 c2.158-2.158,24.642-20.685,27.34-23.383c2.699-2.698,26.621-11.872,26.621-11.872s20.326-20.325,26.621-26.621 c6.296-6.295,22.304-18.706,37.054-16.548c14.749,2.158,17.987,6.835,17.987,6.835v26.621c0,0,18.346,3.238,26.981,5.037 c8.633,1.799,29.139,9.353,29.139,9.353s35.254-3.237,41.01-3.237s30.578,0,30.578,0s5.037-13.67,2.518-16.188 c-2.518-2.518-6.834-13.311-6.834-13.311s-2.34-9.533,0-11.872c2.338-2.338,19.785-0.359,19.785-0.359s2.879-2.159,32.377,19.066 c29.498,21.225,24.104,43.888,24.104,43.888s24.461,31.297,27.699,34.536c3.238,3.237,28.059,24.822,28.059,24.822l3.24,36.694 c0,0,5.035,20.865,5.035,24.103s-1.08,16.188-1.08,21.944s-4.316,10.072-4.316,16.188c0,6.116,8.994,16.909,8.994,16.909 s3.238,61.875,3.238,68.71c0,6.834-16.189,69.789-16.189,69.789l-42.449,75.547c0,0-17.627-5.037-20.146-2.52 c-2.518,2.52-16.727,16.729-19.064,19.066c-2.34,2.338-48.385,1.26-51.443,4.316c-3.059,3.059-16.549,7.557-16.549,7.557 s-23.383,5.395-25.902,5.395c-2.518,0-16.188,0.721-16.188,0.721s-16.188-11.871-20.506-11.871c-4.316,0-26.979,5.035-26.979,5.035 s-26.981-0.719-33.456-3.238c-6.476-2.518-31.297-22.303-31.297-22.303v-6.836c0,0-14.75-17.627-14.75-20.504 c0-2.879-13.67-30.219-13.67-32.377c0-2.16,0.18-33.996-2.519-36.695c-2.698-2.697-14.03-14.029-14.03-14.029l-3.957,17.627 l-29.499,11.512c0,0-2.878-17.986-2.878-20.506c0-2.518-12.231-17.986-12.231-19.785s-3.598-75.186-3.598-75.186L243.114,283.036z", "duration": 1800 }, { "path": "M397.443,325.126c0,0,34.176-50.004,45.688-50.004s8.635,2.878,8.635,2.878", "duration": 600 }, { "path": "M417.229,318.29c0,0,31.658-29.498,39.572-31.656s10.252,0.18,10.252,0.18", "duration": 600 }, { "path": "M406.437,256.775c0,0-1.439-15.649-15.649-15.649 c-14.21,0-38.313,12.771-38.313,12.771s7.195,18.707,15.469,18.707s27.34-1.799,27.34-1.799S402.839,265.05,406.437,256.775z", "duration": 600 }, { "path": "M372.621,270.806c0,0-9.909-6.492-9.909-21.773", "duration": 600 }, { "path": "M393.48,241.335c0,0,8.639,8.965,8.639,12.203 c0,3.237-6.835,14.748-6.835,14.748", "duration": 600 }, { "path": "M426.582,106.043c0,0-1.799,29.858,0,31.658 c1.799,1.798,20.866,14.39,23.204,23.203s5.576,23.203,5.576,30.039c0,6.835-10.791,16.907-8.992,24.102 c1.797,7.195,1.797,47.486,1.797,47.486", "duration": 600 }, { "path": "M575.137,316.593c0-3.135-13.111-34.456-16.17-37.514 c-3.059-3.057-28.779-28.779-28.779-28.779s6.115-14.39,6.115-20.865c0-6.476-37.053-51.083-37.053-53.602 c0-2.519,2.879-15.829,0-15.829s-14.389-8.274-14.389-11.511c0-3.238,1.979-19.966,0-21.944 c-1.98-1.979-24.463-17.268-24.463-17.268l-6.086-8.275", "duration": 600 }, { "path": "M536.303,280.878c0,0,27.342,21.584,31.658,25.902", "duration": 600 }, { "path": "M567.961,310.376c0,0,16.908,14.031,16.908,16.908 c0,2.879,7.014,40.111,9.354,42.449c2.338,2.338,10.072,29.859,10.072,34.535c0,4.678,2.877,33.457,2.877,33.457 s-3.596,15.109-3.596,18.346c0,3.238-12.771,11.332-10.434,13.67c2.338,2.34,2.338,20.146,2.338,20.146", "duration": 600 }, { "path": "M489.896,370.093c0,0-7.555-0.719-8.994-2.158 c-1.438-1.439-9.352-15.469-9.352-19.426s18.346-30.219,35.973-32.736s33.096-2.518,35.256-2.518c2.158,0,27.34,5.396,34.535,16.908 c7.193,11.512,0.719,35.613,0.719,35.613h-4.316c0,0,2.518-20.145-11.871-18.346c-14.391,1.799-16.369,20.324-14.391,22.303 s12.053,5.936,8.994,8.994c-3.059,3.057-14.748,6.115-17.268,6.115c-2.518,0-28.779-4.316-28.779-6.475s0.18-2.34,2.699-4.857 c2.518-2.518,8.094-2.338,8.094-5.215c0-2.879,0-19.787,0-19.787s-10.252-7.375-15.83-1.799c-5.574,5.576-7.285,16.639-5.574,18.348 c1.707,1.707-0.541,5.576-2.158,5.576C496.012,370.634,489.896,370.093,489.896,370.093z", "duration": 1300 }, { "path": "M537.051,384.63l-4.705,26.834c0,0-8.633,22.305-12.59,22.305 s-35.975,10.791-38.133,12.949c-2.158,2.16-21.764,25.363-23.383,26.982c-1.619,1.617-42.09,24.82-42.09,24.82 s20.325-0.18,23.024-2.877c2.697-2.697,17.986-8.635,17.986-8.635s14.748-9.352,18.348-5.754c3.596,3.596,7.193,11.51,5.395,13.311 c-1.799,1.797-5.035,9.713-5.035,9.713s15.109-2.16,18.707-2.16c3.596,0-1.08,7.555,3.596,7.555c4.678,0,20.506-8.633,27.701-4.316 s-1.439,12.951-1.439,12.951", "duration": 1000 }, { "path": "M479.824,466.864h29.139c0,0,8.994,4.316,12.592,4.316 c3.596,0,12.949-5.037,12.949-5.037h15.83c0,0,6.654-2.338,4.496-4.496s-8.633-8.633-8.633-8.633s-22.125-5.217-24.643-5.217 c-2.52,0-24.104,5.396-24.104,5.396l-16.908,11.871", "duration": 600 }, { "path": "M384.373,325.126c0,0-27.821,47.844-27.821,58.396 c0,10.555-42.209,89.217-42.209,89.217", "duration": 600 }, { "path": "M557.889,251.379c0,0,1.439-15.648,15.648-15.648 s38.313,12.771,38.313,12.771s-7.195,18.707-15.469,18.707s-27.342-1.799-27.342-1.799S561.486,259.653,557.889,251.379z", "duration": 600 }, { "path": "M591.703,265.409c0,0,9.91-6.492,9.91-21.773", "duration": 600 }, { "path": "M570.844,235.938c0,0-8.639,8.965-8.639,12.203 c0,3.237,6.834,14.75,6.834,14.75", "duration": 600 } ], "dimensions": { "width": 860, "height": 600 } } }; /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#undefined').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); })(jQuery); </script> |
IDと合わせる
上の方の”lazylinepainter”部分(多分svgのファイル名と同じになってます)と、下の方の#undefinedをさっき作ったdivのidと合わせます。
今回はlazyidです。
|
1 2 3 |
var pathObj = { "lazyid": { "strokepath": [ |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#lazyid').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); |
これで完成です！！簡単ですね！！映画って本当にいいもんですね。
オプションの設定
線の太さや色など結構色々な設定できるので、変えたい方はこちらをご参考くださいませ。
(太さと色はデフォルトで設定が入ってます。)
ちなみに場所はさっきidを変えた下の方らへんにあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#lazyid').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, //線の太さの設定 "strokeColor": "#e09b99" //線の色の設定 //ここに設定を足していく }).lazylinepainter('paint'); }); |
線の設定
- ‘strokeWidth’ // 太さ
- ‘strokeColor’ // 色
- ‘strokeCap’ // 端っこの形 – butt (線の端まで描画) | round (線の端を丸めます) | square (線が突出します)
- ‘strokeJoin’ // 角の形状 – miter (平らな角) | round (丸い角) | bevel (尖がった角)
- ‘strokeOpacity’ // 透明度 0 – 1 (0が透明で1が透明じゃない)
- ‘strokeDash’ // 点線 – ‘5, 5’ (線分, 間隔)
アニメーションの設定
これは関数にして書いてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#lazyid').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99", //こんな感じで書く 'onComplete' : function(){ 何か処理 } }).lazylinepainter('paint'); }); |
- ‘onComplete’ // アニメーションが終わった後に何かする
- ‘onUpdate’ // アニメーションがアップデートした時に何かする
- ‘onStart’ // アニメーションが始まった時に何かする
- ‘onStrokeStart’ // それぞれの線の開始時に何かする
- ‘onStrokeComplete’ // それぞれの線の終了時に何かする
その他の設定
- ‘delay’ // アニメーションの開始を遅らせる (ミリ秒)
- ‘overrideKey’ // 何個か設置する時にさっき合わしたidが合わなくなるので使います。(新しいdivを作るとidを変えないとダメなので、これで上書きして使います。)
- ‘speedMultiplier’ // アニメーションのスピード (ミリ秒)
- ‘drawSequential’ // true: 線を順番に描画, false: 一気に描画
- ‘reverse’ // trueで逆
- ‘ease’ // イージングの設定 (多分jQuery Easing Pluginのイージング)
GitHub見ると色々書いてるので、参考にしてみてください。
よろしければコメントをどうぞ