【jQuery】うねうねと線を描画するSVGアニメーション- Lazy Line Painterの使い方 –
うねうねと線を描画してくれるLazy Line Painterの使い方です。
SVGファイルをサイト上にドラッグ&ドロップするだけで、
描画の座標をかき出してくれます。
ちょっと昔話
以前、ポートフォリオサイトで線を描画してくれるLazy Line Painterを使ってみました。
その時は、Firefoxで動きがカクカクしたり、スマホでは全くアニメーションしてくれず…
当時は、仕方ないかと思いつつ、仕事も決まったし、
一旦ポートフォリオサイトは閉じました。
その時からおよそ一年経ち、ポートフォリオを見直しでもしようかと思った時に、
ふと、プラグインがどうなったか気になり調べてみると…
Firefoxでもちゃんと動くし、スマホでも綺麗に動くようになっていました！！
また、以前は「Raphaël」というライブラリも一緒に読み込みが必要でしたが、
その必要もなくなっていて、より便利になっています。
ちょっと前置き長くなりましたが、以下使い方書いていきます。
ダウンロード
GitHubよりダウンロードしてください。
サイトの右下あたりにダウンロードボタンがあります。
GitHub
ダウンロードしたzipファイルを解凍してください。
読み込み
headタグ内に、jQuery本体と「lazylinepainter-1.5.1.min.js」を読み込みます。
<script src="jquery.lazylinepainter-1.5.1.min.js"></script>
読み込みは以上です。
線を書き出す
まずは、SVGファイルの画像を用意します。
今回使う画像はこちら。
SVG画像を用意したら、LazyLinePainterへ。
LazyLinePainter
下の方にある「SVG TO LAZY LINE CONVERTER」に画像をドラッグ&ドロップします。
（エリアをクリックして、ファイルを選択する方法でもできます）
するとこんな感じで描いて見せてくれます。
注意としては、縦横1000px以内、ファイルサイズは40KBまでです。
これでOKであれば、この下にコードを書き出してくれているので、コピーしておきます。
jQuery
先ほどコピーしておいたコードを、jQueryに貼り付けます。
今回のカメラの画像であればこんな感じです。
/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
var pathObj = {
"camera": {
"strokepath": [
{
"path": "M163,106.6c24.1,0,43.6,19.5,43.6,43.6c0,24.1-19.5,43.6-43.6,43.6c-24.1,0-43.6-19.5-43.6-43.6 C119.4,126.2,139,106.6,163,106.6z",
"duration": 600
},
{
"path": "M242,55.4h-10c-7.7,0-17.2-5.4-21.1-12l-2.7-4.5c-4-6.6-13.4-12-21.1-12h-48.9c-7.7,0-17.4,5.2-21.7,11.6 l-3.5,5.2c-4.3,6.4-14,11.6-21.7,11.6H65.1c-7.7,0-14-3.2-14-7.1c0-3.9-6.2-7.1-14-7.1H26c-7.7,0-14,3.2-14,7.1 c0,3.9-2.7,7.1-6,7.1c-3.3,0-6,6.2-6,13.9V215c0,7.7,6.2,14,14,14H242c7.7,0,13.9-6.2,13.9-14V69.4C256,61.7,249.7,55.4,242,55.4 z M37.2,94.1h-8.1c-7.7,0-13.9-5.3-13.9-11.9c0-6.5,6.2-11.9,13.9-11.9h8.1c7.7,0,14,5.3,14,11.9C51.2,88.8,44.9,94.1,37.2,94.1z M163,214.7c-35.6,0-64.5-28.9-64.5-64.5c0-35.6,28.9-64.5,64.5-64.5c35.6,0,64.5,28.9,64.5,64.5 C227.5,185.9,198.7,214.7,163,214.7z M231.8,90.3c-5.5,0-10-4.5-10-10s4.5-10,10-10c5.5,0,10,4.5,10,10S237.3,90.3,231.8,90.3z",
"duration": 1400
}
],
"dimensions": {
"width": 256,
"height": 256
}
}
};
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});
注意点は、この記述の冒頭の「camera」の部分と
var pathObj = {
"camera": {
"strokepath": [
{
下方の「undefined」の部分、
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
この2箇所は任意の表記で揃えましょう。
今回は「line」で統一しておきます。
また、以下で線の太さや色をへんこうできます。
"strokeWidth": 2, "strokeColor": "#e09b99"
HTML
表示したいところにdivタグを記述し、
先ほど統一した名前のIDを追加するだけです。
今回であればこんな感じです。
<div id="line"></div>
これで完了！動くはずです。
簡単です！
ちょっとひと工夫①
デモサイトでやっている、描画後に画像を表示する方法です。
やっていることは簡単で、描画線と画像を重ねておき、画像は非表示にしておきます。
描画後に、線はフェードアウトさせて、画像をフェードインさせるだけです。
例えば、こんな感じで描画線と、画像をdivで囲い、
<div class="canvas"> <div id="line"></div> <img src="images/cameras.png" height="256" width="256" alt="" id="illust"> </div>
CSSで重ねて、画像を非表示にしておきます。
.canvas {
width: 300px;
height: 300px;
position: relative;
}
#illust,#line {
position: absolute;
top: 0;
left: 0;
}
#illust {
display: none;
}
jQueryで以下を追記します。
“1200”というところで、何秒後に動作させるか調整しています。
setTimeout(function() {
$('#illust').fadeTo(2000, 1);
$('#line').fadeOut(2000);
}, 1200);
追記するとこんな感じです。
$(document).ready(function(){
$('#line').lazylinepainter({
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#555"
}).lazylinepainter('paint');
setTimeout(function() {
$('#illust').fadeTo(2000, 1);
$('#line').fadeOut(2000);
}, 1200);
});
さらにもうひと工夫②
アニメーションを最初からしっかりと見てもらいたい場合、
サイトを開いていきなりアニメーションが始まると見逃されるかもしれません。
そんな時のために開始のタイミングを一瞬遅らせます。
先ほども使ったsetTimeoutをさらに追加します。
こんな感じです。
$(document).ready(function(){
setTimeout(function(){
$('#line').lazylinepainter({
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#555"
}).lazylinepainter('paint');
setTimeout(function() {
// 線画消して元のロゴフェードインする
$('#illust').fadeTo(2000, 1);
$('#line').fadeOut(2000);
}, 1200);
},300);
});
一番下の”300″というところで時間を調整しています。
さいごに
アニメーションがあるとインパクトあるサイトになっていいですね。
あんまり長いアニメーションだとうっとおしいかもしれませんが…
簡単に使えるのでぜひ試してみてください。