こんにちは、デザイナーのSUGIYAMAです。
今回はSVGパスを手軽にアニメーションできるプラグイン「jQuery DrawSVG」を紹介します。
See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen.0
SVGとは
SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、JPEGやPNGのような画像（ビットマップデータ）ではなくXMLをベースとした二次元ベクターデータになります。
準備するもの
まずは公式からプラグインをダウンロードしましょう。
最低限必要なものは「jquery.js」「jquery.drawsvg.js」のみです。
アニメーションにeagingをかけたい場合は、「jquery.easing.min.js」が合わせて必要になります。
あとは、アニメーションしたいSVGファイルを用意してください。
ファイルの読み込み
htmlファイルに以下のファイルを読み込みます。
<!-- js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.drawsvg.js"></script>
使い方
SVGファイルをエディタで開き、コードをコピーしてhtmlファイルに貼り付けてください。
このプラグインの欠点として、imgタグで読み込んだ場合はアニメーションできませんので、htmlに直接コードを記述する必要があります。
<!-- html --> <svg id="elemnt" viewBox="0 0 201 146" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="201" height="146" class=" drawsvg-initialized"> <g stroke="#FFF" stroke-width="1" fill="none"> <path d="M200.5 128.586c0 9.302-7.678 16.914-17.06 16.914H17.56C8.18 145.5.5 137.888.5 128.586V29.414C.5 20.112 8.178 12.5 17.56 12.5h165.88c9.382 0 17.06 7.612 17.06 16.914v99.172z" style="stroke-dasharray: 636.783, 636.783; stroke-dashoffset: 0;"></path> <path d="M183.828 80.118c0 26.467-21.644 47.924-48.34 47.924-26.698 0-48.342-21.457-48.342-47.924s21.644-47.924 48.34-47.924c26.698 0 48.342 21.457 48.342 47.924z" style="stroke-dasharray: 302.468, 302.468; stroke-dashoffset: 0;"></path> <path d="M171.98 80.118c0 19.978-16.338 36.177-36.493 36.177-20.15 0-36.49-16.2-36.49-36.177 0-19.98 16.34-36.177 36.49-36.177 20.155 0 36.494 16.2 36.494 36.178z" style="stroke-dasharray: 228.328, 228.328; stroke-dashoffset: 0;"></path> <path d="M50.18 48.637c0 6.49-5.304 11.747-11.852 11.747-6.543 0-11.847-5.258-11.847-11.747 0-6.488 5.305-11.746 11.848-11.746 6.548 0 11.852 5.26 11.852 11.747z" style="stroke-dasharray: 74.1446, 74.1446; stroke-dashoffset: 0;"></path> <path d="M17.928 39.877c3.41-7.835 11.258-13.305 20.416-13.305 9.16 0 17.006 5.47 20.416 13.305" style="stroke-dasharray: 51.5869, 51.5869; stroke-dashoffset: 0;"></path> <path d="M46 12V4H26v8" style="stroke-dasharray: 36, 36; stroke-dashoffset: 0;"></path> <path d="M94.833 12l11.5-11.5h59.5l11.5 11.5" style="stroke-dasharray: 92.0269, 92.0269; stroke-dashoffset: 0;"></path> <path d="M26.333 92.5h35.5" style="stroke-dasharray: 35.5, 35.5; stroke-dashoffset: 0;"></path> <path d="M26.333 105.5h43" style="stroke-dasharray: 43, 43; stroke-dashoffset: 0;"></path> <path d="M26.333 117.5h52" style="stroke-dasharray: 52, 52; stroke-dashoffset: 0;"></path> </g> </svg>
htmlは以上です。
CSSも専用に記述する必要はありません。
次にアニメーションを実行するためのJavaScriptを記述します。
基本的な書き方は以下になります。
// jQuery DrawSVG
var mySVG = $('#element').drawsvg();
mySVG.drawsvg('animate');
描画速度やパスごとのタイミング等のオプション機能
| Option名 | デフォルト | 概要 |
|---|---|---|
| duration | 1000 | ひとつのpathが描き終わる速度を指定できます。 |
| stagger | 200 | 次のpathを書き始めるまでの遅延時間を指定できます。 |
| easing | swing | イージングを指定できます。「jquery.easing.min.js」と組み合わせて使用することも可能です。 |
| reverse | false | 最後のポイントからアニメーションする場合使用します。 |
| callback | function() {} | アニメーションが完了後に、関数を実行する場合使用します。 |
ちなみに、durationとstaggerを同じ値にすると１本の線を描き終わったら次の線を描く、というアニメーションにすることができます。
スクロールに合わせてアニメーションさせる方法
アニメーションの進捗値を使って、スクロールに合わせて描画することも可能です。
See the Pen Draw on scroll by Leonardo Santos (@lcdsantos) on CodePen.0
//スクロールに合わせて描画
var $doc = $(document),
$win = $(window),
$svg = $('#element').drawsvg(),
max = $doc.height() - $win.height();
$win.on('scroll', function() {
var p = $win.scrollTop() / max;
$svg.drawsvg('progress', p);
});
「.drawsvg('progress',任意の値);」で進捗具合に好きな値を入れてコントロールすることができます。
まとめ
だいぶSVGを使える環境も整ってきているので、今後ちょっとしたアクセント等に導入していければと思っています。
また他にも「Lazy Line Painter」というWEBサービスがあり、そちらも簡単にアニメーションができるので、オススメです。
そちらについても機会があれば紹介できればと思います。
