Lazy Line PainterでSVGアニメーションを実装してみよう
2017/01/30
こんにちは、okutani(@okutani_t)です。「Lazy Line Painter」というサイトを利用すると、かんたんにWeb上で動くSVGファイルを生成することができます。
公式サイトは以下リンクです。サイト上でアニメーションの動きを確認することができます。
私のポートフォリオでも実際に利用していますので、動きを確認したい方は一度閲覧してみてください。
ではさっそく、Lazy Line Painterを使ってSVGアニメーションを実装してみましょう。
スポンサーリンク
SVGファイルを作成する
まずはSVGファイルを用意します。
AdobeのIllustratorを使ってSVGファイルを作成します。 ここは超ー簡潔に説明するにとどめておきます（というより僕がIllustratorほとんど分からない）。
今回は、ノートPCの絵をブラシツールの一番細いやつで書いてみました。
これを保存時にSVGで書き出せばOKです。
SVGファイルの用意ができました。
Lazy Line Painterでアニメーションをつける
Lazy Line Painterのサイトから、作成したSVGファイルにアニメーションをつけます。
公式サイトの以下の場所に、SVGファイルをドラッグ＆ドロップ。
アップしたSVGファイルを元に、自動でアニメーションがつきます。下に出力されたコードをコピーします。「Copy data to clipboard」をクリックしてもコピーできます。
このコピーしたコードを利用するだけで、アニメーション付きのSVGファイルを扱うことができます。なので、先ほど作ったSVGファイルはこれ以降不要です。
では、てきとうにindex.htmlを作成して、ブラウザで動かしてみましょう。
SVGアニメーションをブラウザで動かす
index.htmlを作成して、先ほどアニメーションがついたSVGを表示させてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVG Animation</title>
<style>
#skills {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="skills"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="./jquery.lazylinepainter-1.7.0.min.js"></script>
<script src="./skills.js"></script>
</body>
</html>jQueryが必要なのでCDNで読み込んでおく必要があります。今回はgoogleのCDNを読み込んでみました。
「jquery.lazylinepainter-1.7.0.min.js」ファイルはGitHubから取得できます。これがないとアニメーションできないので注意。
LINKcamoconnell/lazy-line-painter: A jQuery plugin for path animation using the CSS –
Lazy Line Painterのサイトで変換したjsファイルは、今回「skills.js」と名前をつけて保存し、jQueryとjquery.lazylinepainter-1.7.0.min.jsの読み込み後に設置しています。
skills.jsの中身は以下の通りです。ソースコードは多少、読みやすくなるよういじってあります。
/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
var skillObj = {
"skills": {
"strokepath": [
{
"path": "M35.3,101.1c-1.1-14.7-1.4-29.4-0.9-44c0.2-7.3,0.7-14.6,1.3-21.8c0.1-1.6,0.1-3.4,0.6-5c0.5-1.4,1.8-1.9,3.2-2.3 c3.4-0.8,7-1.3,10.5-1.7c15.5-1.6,31.1-1.5,46.7-1.3c14.7,0.2,29.5,0.6,44.2,0.8c7.3,0.1,14.7,0.3,22,0.4c1.8,0,3.7,0.1,5.5,0.1 c0.9,0,1.8,0,2.7,0.1c1,0,2.1-0.1,3.1,0.1c1.5,0.3,2,1.5,2.1,3c0,1.6-0.1,3.2-0.2,4.8c-0.3,14,1.9,27.9,3,41.8 c0.5,6.9,0.8,13.8,0.3,20.7c-0.1,1.7-0.3,3.5-0.5,5.2c-0.1,0.8-0.2,1.7-0.4,2.5c-0.1,0.4-0.1,0.7-0.2,1.1 c-0.1,0.5-0.1,1.2-0.3,1.6c-0.2,0.3,0.1,0.2-0.3,0.3c-0.2,0-0.4,0-0.6,0.1c-0.5,0.1-0.9,0.1-1.4,0.2c-0.9,0.1-1.9,0.2-2.8,0.4 c-1.8,0.2-3.6,0.4-5.4,0.7c-14.6,1.8-29.3,3.4-44,4.1c-8.2,0.4-16.4,0.5-24.6,0.2c-7.4-0.2-14.7-0.6-22.1-1 c-7.3-0.4-14.5-0.7-21.8-0.9c-3.5-0.1-7.1,0.1-10.6-0.1c-3.1-0.2-6.4-0.9-8.7-3.2c-1.8-1.8-2.9-4.3-2.3-6.9c0,0-0.1,0-0.1,0 c-0.7,2.8,0.7,5.5,2.7,7.3c2.4,2,5.5,2.6,8.6,2.8c3.5,0.2,7,0.1,10.5,0.1c3.9,0.1,7.7,0.2,11.6,0.4c14.5,0.6,29,1.7,43.5,1.6 c14.7-0.1,29.3-1.3,43.9-2.9c7.5-0.8,15-1.8,22.4-2.7c0.2,0,1.3,0,1.4-0.2c0.2-0.2,0.2-1,0.2-1.2c0.2-0.9,0.3-1.9,0.5-2.8 c0.3-1.8,0.5-3.6,0.6-5.4c0.3-3.5,0.4-7,0.3-10.5c-0.2-14.4-2.7-28.7-3.4-43.1c-0.2-3.6-0.3-7.2-0.2-10.8c0-1.6,0.3-3.3,0.1-4.9 c-0.2-1.5-1.1-2.3-2.6-2.4c-1.7-0.1-3.3-0.1-5-0.1c-1.9,0-3.8-0.1-5.8-0.1c-3.8-0.1-7.7-0.1-11.5-0.2c-15.2-0.3-30.4-0.6-45.5-0.9 c-14.2-0.3-28.5-0.6-42.7,0.1c-7.3,0.4-14.7,0.8-21.9,2.3C40,27.9,38,28,37,29.2c-1.1,1.2-1,3.1-1.1,4.5 c-0.3,3.7-0.6,7.4-0.9,11.1c-1,15.1-1.1,30.2-0.4,45.3C34.7,93.8,35,97.5,35.3,101.1C35.2,101.1,35.3,101.1,35.3,101.1L35.3,101.1 z",
"duration": 1800
},
{
"path": "M39.6,104.4C40,90.8,40.5,77.2,41,63.6c0.3-6.8,0.5-13.6,0.8-20.4c0.1-3.4,0.3-6.8,0.4-10.2c0.1-1.3,0.1-2.8,1.2-3.7 c0.9-0.8,2.2-0.9,3.4-1c13.6-1.1,27.3-1.6,41-1.8c14.3-0.2,28.6,0,42.9,0.6c6.8,0.3,13.5,0.7,20.3,1.2c3.5,0.3,7,0.5,10.5,0.8 c1.6,0.1,3.3,0.2,4.8,0.5c1.1,0.2,2.2,0.8,2.9,1.7c1.4,1.7,1.7,4.1,1.7,6.3c0,3-0.3,5.9-0.5,8.9c-0.3,6.7-0.5,13.4-0.5,20.2 c0,6.8,0.3,13.5,0.7,20.3c0.2,3.3,0.5,6.6,0.8,9.9c0.2,1.7,0.3,3.4,0.5,5.1c0,0.4,0.1,0.8,0.1,1.2c0,0.2,0.1,0.5,0.1,0.7 c-0.1,0.2-0.2,0.2-0.4,0.3c-0.7,0.3-1.4,0.6-2.1,0.8c-5.8,1.9-12,1-18,1.1c-6.4,0.1-12.7,1.7-19,2.3c-7.2,0.8-14.4,0.7-21.5,0.7 c-6.8,0-13.6,0-20.4,0c-13.9,0-27.9,0.4-41.7-1c-3.2-0.3-6.4-0.8-9.6-1.4c0,0-0.1,0-0.1,0c13,2.4,26.3,2.4,39.4,2.4 c13.7,0,27.3,0.1,41,0c3.3,0,6.6-0.1,9.9-0.4c3.4-0.3,6.8-0.7,10.1-1.2c3.4-0.5,6.8-1.1,10.3-1.3c3.4-0.2,6.8,0,10.2,0 c2.7,0,5.3-0.2,7.9-0.8c0.7-0.2,1.3-0.3,1.9-0.6c0.4-0.1,0.7-0.3,1.1-0.4c0.2-0.1,0.3-0.1,0.5-0.2c0.1,0,0.2-0.1,0.3-0.1 c0.2,0,0.3-0.2,0.2-0.4c0-0.3-0.1-0.7-0.1-1c0-0.4-0.1-0.9-0.1-1.3c-0.1-0.9-0.2-1.8-0.3-2.7c-0.7-6.9-1.1-13.8-1.4-20.8 c-0.3-6.9-0.3-13.8-0.2-20.7c0.1-3.5,0.2-7,0.4-10.5c0.2-3,0.5-6.1,0.5-9.2c-0.1-2.2-0.4-4.6-1.9-6.3c-0.9-1-2.1-1.4-3.4-1.6 c-1.7-0.2-3.4-0.3-5-0.5c-6.9-0.6-13.8-1.1-20.8-1.5c-13.5-0.8-27.1-1.1-40.6-1.1c-13.5,0-27,0.4-40.5,1.1 c-3.5,0.2-6.9,0.4-10.4,0.6c-1.3,0.1-2.7,0.1-4,0.5c-1.3,0.4-2.1,1.5-2.3,2.8c-0.2,1.6-0.2,3.3-0.3,5c-0.1,1.8-0.2,3.5-0.2,5.3 c-0.1,3.5-0.3,7-0.4,10.4c-0.6,14-1.1,27.9-1.5,41.9c-0.1,3.4-0.2,6.9-0.3,10.3C39.5,104.4,39.6,104.4,39.6,104.4L39.6,104.4z",
"duration": 1800
},
{
"path": "M31.1,116.2c-1.6,15.3-7.4,29.7-9.8,44.9c-0.7,4.3-1,8.6-0.9,13c0,0,0.1,0,0.1,0c22.4-0.4,44.9-0.8,67.3-1.2 c22.6-0.4,45.1-0.7,67.7-1c12.7-0.1,25.3-0.3,38-0.3c0,0,0,0,0,0c-2.7-7.9-4.4-16.1-5.4-24.4c-1-8.4-1.7-16.7-3.5-24.9 c-1-4.6-2.2-9.2-3.7-13.7c0,0-0.1,0-0.1,0c2.9,9.2,5,18.6,6.1,28.2c0.6,4.8,1,9.7,1.6,14.5c0.7,4.7,1.6,9.3,2.8,13.8 c0.3,1.1,0.6,2.1,0.9,3.1c0.2,0.5,0.3,1,0.5,1.6c0.1,0.4,0.8,1.6,0.3,1.9c-0.2,0.1-0.8,0-1,0c-0.3,0-0.7,0-1,0c-0.6,0-1.2,0-1.7,0 c-1.3,0-2.5,0-3.8,0c-4.8,0-9.7,0.1-14.5,0.1c-9.8,0.1-19.6,0.2-29.4,0.3c-19.9,0.3-39.8,0.6-59.7,0.9 c-19.8,0.3-39.6,0.7-59.4,1.1c-0.5,0-1.5,0.2-1.9-0.1c-0.3-0.3-0.1-1.3-0.1-1.7c0-1.1,0-2.3,0.1-3.4c0.1-2.2,0.4-4.4,0.7-6.6 c0.6-4.4,1.6-8.8,2.6-13.1c2.2-8.8,4.8-17.4,6.4-26.3c0.4-2.2,0.7-4.3,0.9-6.5C31.2,116.2,31.1,116.2,31.1,116.2L31.1,116.2z",
"duration": 1800
},
{
"path": "M38.4,116.8c-1.7,11.8-3.4,23.7-5.1,35.5c0,0,0.1,0,0.1,0c8.9-2.1,17.9-3.5,27-4.3c5.2-0.4,10.5-0.6,15.8-0.6 c4.4,0,8.7,0.2,13.1,0.1c9.1,0,18-1.3,27.1-1.8c10.3-0.5,20.5-0.3,30.8,0.2c10.6,0.5,21.2,1.4,31.7,2.3c0,0,0.1,0,0.1,0 c-0.2-5.8-0.4-11.6-0.7-17.4c-0.1-2.8-0.3-5.7-0.5-8.5c-0.1-1.4-0.2-2.9-0.3-4.3c0-0.7-0.1-1.4-0.1-2.2c0-0.6,0-1.3-0.4-1.7 c-0.4-0.4-1-0.5-1.5-0.6c-0.7-0.1-1.5-0.2-2.2-0.3c-1.3-0.2-2.6-0.3-3.9-0.4c-1.9-0.1-3.9-0.1-5.8-0.1c-5.5,0.1-10.9,0.7-16.4,1.3 c-5.7,0.7-11.4,1.4-17.2,1.7c-5.8,0.4-11.7,0.5-17.5,0.6c-11.6,0.2-23.1,0.3-34.7,0.5c-11.5,0.2-23.1,0.3-34.6,0.5 c-1.5,0-2.9,0-4.4,0.1c0,0,0.1,0,0.1,0c11.7-0.2,23.4-0.3,35.2-0.5c11.7-0.2,23.4-0.3,35-0.5c5.7-0.1,11.4-0.2,17.1-0.4 c5.6-0.2,11.2-0.7,16.8-1.4c5.8-0.7,11.5-1.4,17.3-1.7c3.7-0.2,7.4-0.2,11.1,0.2c1.4,0.1,2.8,0.3,4.2,0.6c0.6,0.1,1.2,0.2,1.4,0.8 c0.2,0.6,0.2,1.3,0.2,1.9c0.4,5.8,0.7,11.7,1,17.5c0.1,2.9,0.3,5.8,0.4,8.7c0.1,1.4,0.1,2.9,0.1,4.3c0,0.3,0.1,0.9,0,1.2 c-0.1,0.4-0.6,0.2-0.9,0.2c-0.8-0.1-1.5-0.1-2.3-0.2c-11.5-1-23-1.9-34.5-2.3c-10.6-0.4-21.1-0.3-31.7,0.5c-6,0.5-12,1.2-18,1.3 c-5.9,0.1-11.8-0.2-17.6-0.1c-11.1,0.1-22.2,1.2-33.1,3.3c-1.4,0.3-2.8,0.6-4.1,0.9c-0.6,0.1-1.3,0.3-1.9,0.4 c-0.2,0-1,0.3-1.1,0.3c-0.3-0.2,0-0.8,0-1.1c0.4-2.9,0.8-5.7,1.2-8.6c0.8-5.8,1.7-11.5,2.5-17.3c0.4-2.8,0.8-5.6,1.2-8.4 C38.5,116.8,38.4,116.8,38.4,116.8L38.4,116.8z",
"duration": 1800
},
{
"path": "M78.2,166.6c0.6-2.2,1.2-4.5,1.9-6.7c0.3-1.1,0.6-2.2,0.9-3.3c0.2-0.8,0.3-2,1.3-2.2c0.5-0.1,1-0.1,1.5-0.1 c0.6,0,1.2-0.1,1.8-0.1c1.1-0.1,2.3-0.2,3.4-0.3c2.3-0.2,4.6-0.4,6.8-0.5c9.8-0.8,19.5-1.4,29.3-1.1c2.3,0.1,4.6,0.2,7,0.4 c1.1,0.1,2.3,0.2,3.4,0.4c0.5,0.1,1,0.1,1.6,0.2c0.4,0.1,0.9,0.1,1.2,0.4c0.3,0.3,0.4,0.8,0.4,1.2c0,0.5,0,1.1,0,1.6 c0,1.2,0,2.3,0,3.5c0,2.3,0.1,4.5,0,6.8c0,0.4-0.1,0.8-0.4,1.1c-0.5,0.4-1.3,0.3-1.8,0.3c-1.1,0-2.3,0-3.4,0c-2.4,0-4.8,0-7.2,0 c-4.7,0-9.5-0.1-14.2-0.2c-9-0.3-18-1.1-26.8-2.7c-1.1-0.2-2.2-0.4-3.2-0.6c0,0-0.1,0-0.1,0c9.3,2,18.8,2.9,28.2,3.3 c9.1,0.4,18.2,0.3,27.2,0.3c0.7,0,1.6,0,1.8-0.9c0.1-0.5,0-1,0-1.5c0-0.6,0-1.3,0-1.9c0-2.4,0-4.9,0-7.3c0-0.9,0.3-2.4-0.6-2.9 c-0.4-0.2-0.8-0.3-1.2-0.3c-0.7-0.1-1.3-0.2-2-0.2c-2.3-0.3-4.7-0.5-7.1-0.6c-9-0.5-18.1-0.1-27.1,0.6c-4.8,0.3-9.6,0.7-14.4,1.1 c-1.2,0.1-2.5,0.2-3.7,0.3c-0.4,0-0.9,0.1-1.2,0.4c-0.4,0.3-0.4,0.9-0.6,1.4c-0.7,2.4-1.3,4.7-2,7.1 C78.7,164.3,78.4,165.4,78.2,166.6C78.1,166.6,78.2,166.6,78.2,166.6L78.2,166.6z",
"duration": 1800
},
{
"path": "M27.2,38.7c-1.5-0.7-2.2-2.4-2.5-3.9c-0.3-1.8-0.1-3.6,0.5-5.3c1.1-3.5,3.3-6.6,5.7-9.3c1.4-1.5,2.9-2.9,4.7-4.1 c0,0-0.1,0-0.1,0c-3.1,2-5.5,4.8-7.6,7.8c-2,2.9-3.7,6.5-3.4,10.1c0.2,1.8,0.8,3.9,2.6,4.7C27.1,38.7,27.2,38.7,27.2,38.7 L27.2,38.7z",
"duration": 600
},
{
"path": "M15,41c-1.2-2.5-0.7-5.3,0.2-7.8c0.9-2.8,2.1-5.5,3.2-8.3c1-2.6,2-5.2,3.4-7.7c1.3-2.2,3-4.1,5.2-5.5 c2.5-1.6,5.5-2.4,8.5-2.3c0,0,0.1,0,0.1,0c-4.7-0.2-9.3,1.8-12.3,5.5c-1.8,2.2-2.9,4.9-4,7.6c-1.2,3-2.4,6.1-3.6,9.1 c-1.1,2.9-2.2,6.3-0.7,9.3C14.9,41,15,41,15,41L15,41z",
"duration": 600
},
{
"path": "M3,45.2c2-7.6,4.4-15,7.5-22.3c1.5-3.6,3-7.2,4.9-10.6c0.9-1.6,1.9-3.2,3.1-4.6c1.1-1.2,2.4-2.2,3.8-3.1 c3.2-2.1,6.8-3.4,10.4-4.6c0,0-0.1,0-0.1,0c-3.2,1.1-6.4,2.3-9.3,4c-3,1.7-5.5,4.1-7.3,7.1c-1,1.6-1.8,3.4-2.6,5.1 c-0.8,1.8-1.6,3.6-2.4,5.4C9.4,25.1,8,28.8,6.7,32.5C5.3,36.7,4,40.9,2.9,45.2C2.9,45.2,3,45.2,3,45.2L3,45.2z",
"duration": 600
}
],
"dimensions": {
"width": 200,
"height": 200
}
}
};
/*
Setup and Paint your lazyline!
*/
function skill_animation()
{
$('#skills').lazylinepainter({
"svgData": skillObj,
"strokeWidth": 3,
"strokeColor": "#e09b99",
"speedMultiplier": 0.4
}).lazylinepainter('paint');
}
// 発火するタイミングを設定
var $window = $(window),
$skill = $('#skills'),
topSkill = $skill.offset().top;
var Flag = false;
// そこまでスクロールしたら実行
$window.scroll(function() {
if ($window.scrollTop() > topSkill &&
Flag === false) {
skill_animation();
Flag = true;
}
});「strokeWidth」「strokeColor」「speedMultiplier」あたりはお好きに設定してください。
また、上記コードでは発火するタイミングなどを自分で設定しています。参考にしてください。
DEMOは以下です（他のSVGアニメーションもありますが気にせずどうぞ）。
DEMOSVG Animation
私のポートフォリオでも、同様の動きを確認することができます。
今回利用したソースコードは、私のGitHub上でも公開しています。
参考jQuery-code/svg-anime at gh-pages · okutani-t/jQuery-code
SVGでアニメーションをつけてみたい方の参考になれば幸いです。
okutani (okutani_t) のヒトコト
SVGファイルを作成するところにつまづかなければ、意外とかんたんにSVGアニメーションを実装することができました。Web制作の可能性が広がりますね。。！
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
