今回はSVGでのパスアニメーションの実装を手軽にするjQuery DrawSVGを紹介します。
SVGでのパスアニメーションはCSSだけでも実装できたりしますが、このプラグインだと個別描画やコールバックが取れたりと、CSSだけよりも使い勝手がよかったです。
用意するもの
まずは公式からプラグイン一式をダウンロードしましょう。
最低限必要なものはjqueryとjquery.drawsvg.jsのみです。あとは描画したいSVGコードでしょうか。とりあえずサンプルのものを流用してもよいと思います。
<script src="jquery-2.2.4.js"></script> <script src="jquery.drawsvg.js"></script>
基本的な使い方
html側でする特別な作業はほとんどありません。
気をつけるのはSVGはimgタグで読み込むのではなくコードとして記述する、というくらいでしょうか。
<svg id="my_svg_element" viewBox="0 0 190 132" xmlns="http://www.w3.org/2000/svg" width="190" height="132"> <g stroke="#2aF" stroke-width="2" fill="none"> <path d="M183.618.5c3.234 0 5.882 2.647 5.882 5.88v119.24c0 3.233-2.648 5.88-5.882 5.88H6.382C3.148 131.5.5 128.853.5 125.62V6.38C.5 3.147 3.148.5 6.382.5h177.236z" /> <path d="M184 1c0 .833-72.32 78.49-72.32 78.49-8.915 9.376-23.5 9.376-32.416-.007C79.264 79.483 5 1.03 5 1" /> <path d="M66.816 20.924c0 7.063-5.727 12.788-12.793 12.788-7.07 0-12.793-5.725-12.793-12.788 0-7.063 5.722-12.788 12.793-12.788 7.066 0 12.793 5.725 12.793 12.788z" /> <path d="M75.5 13.5h28" /> <path d="M82.5 21.5h33" /> <path d="M74.5 30.5h32" /> <path d="M2.5 129.5l55-55" /> <path d="M187.5 129.5l-55-55" /> </g> </svg>
CSSも特別記述をする必要はありません。
Javascript部分の基本的な書き方は以下になります。これで、ロード完了時にパスアニメーションが行われます。
var mySVG = $('#my_svg_element').drawsvg();
mySVG.drawsvg('animate');
描画速度やパスごとのタイミングのオプションのつけ方は以下のとおりです。
var mySVG = $('#my_svg_element').drawsvg({
duration:1000, //ひとつのpathが描き終わる速度
stagger:200, //次のpathを書き始めるまでの遅延時間。
easing:'swing', //jqueryで使用できるイージングを実装。
reverse:false, //描く方向の指定。
callback: function() {
//処理を記述
}
});
mySVG.drawsvg('animate');
ちなみに、durationとstaggerを同じ値にすると１本の線を描き終わったら次の線を描く、というアニメーションにすることができます。
次は、アニメーションの進捗値を使って、スクロールすると描画されていく、という内容のサンプルです。
.drawsvg(‘progress’,任意の値);で進捗具合に好きな値を入れてコントロールすることができるようです。
var $doc = $(document),
$win = $(window),
$svg = $('#my_svg_element').drawsvg(),
max = $doc.height() - $win.height();
$win.on('scroll', function() {
var p = $win.scrollTop() / max;
$svg.drawsvg('progress', p);
});
ただ、スクロールはマウスだと少しかくかくするし、ブラウザの描画能力の問題なのかたまにうまく描画されてくれないです（僕だけかもですが）。
ローディングアニメーションの値を入れたりすると綺麗かもしれませんね。
公式にはほかにもいくつかサンプルがあるので、詳しくはそちらをご覧ください。
Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。〈HTML、CSS、jQuery、SVG、Webフォント〉
-Amazonでみる
