Vivus.js
今回はSVGのパスアニメーションが使えるプラグインをご紹介です。
個人的に思うVivus.jsのいいところは、pathタグだけじゃなくてrectやcircleなんかのタグもpathに変換して一括コントロールできるところです。SVG関係のプラグインてこのpathだけって縛りが結構使いづらかったんですよねー。
用意するもの
必要なものは公式Githubからダウンロードします。必要なものは以下の2つです。両方ともsrcディレクトリの中に入っています。
distの方に.minの圧縮ファイルも入ってるのでそちらでも大丈夫です。
1 2 | <script src="vivus.js" type="text/javascript"></script><script src="pathformer.js" type="text/javascript"></script> |
プラグインの本体はvivus.jsで、pathformer.jsはSVG内のいろいろなタグをpathに変換するために必要な感じです。
基本的な使い方
使い方はそんなに難しくないのですが、指定の仕方が3種類あります。いずれも一番シンプルな記述の仕方で、ページの読み込みと共にSVGのパスアニメーションが開始します。
・インラインSVGで使う場合
html側はidをつけたSVGを記述するだけです。
1 2 3 4 5 | <svg id="mySvg"> <path...> 〜 <path...></svg> |
1 2 | //第一引数に対象SVGのidを、第二引数にオプション、第三はコールバックですが省略可です。new Vivus('mySvg', {duration: 300}); |
・オブジェクトタグでsvgを読み込む場合
js側の記述はインラインと変わりません。
1 | <object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object> |
1 | new Vivus('mySvg', {duration: 300}); |
・js側でsvgを読み込む場合
個人的にはこれが一番使いやすそうだなと思っています。描画領域のidを設定した後は全部js側で完結出来るので。
1 | <div id="mySvg"></div> |
1 | new Vivus('my-div-id', {file: 'drawing.svg', duration: 1000}); |
オプションについて
オプションも結構豊富に揃っています。
デフォルトでは若干パスごとに遅延をつけた描画ですが、パスを一本ずつ描画していったり、同時にパスの描画が始まって同時に終わる（パスの描画速度を自動調整してくれる）といった指定が簡単に出来たります。
たくさんあるので良く使いそうなものだけ紹介します。詳しくは公式Githubで確認してみてください。
1 2 3 4 5 6 7 8 9 | new Vivus('my-div-id', { file: 'img/star.svg', //読み込むSVGファイルのパスを指定 type: 'delayed’, //描画タイプの指定、oneByOne,asyncなど start: 'autostart', //描画開始のタイミング duration: 1000, //秒数指定 animTimingFunction:Vivus.EASE_OUT //イージング指定。 }); |
イージング指定はEASE, EASE_IN, EASE_OUT, EASE_OUT_BOUNCEの４つがあるようですね。
それと先ほど省きましたが、typeにはパスのDOMに対して属性を設定することで、パス1本1本の速度やスタートタイミングを制御するscenarioというモードもあります。
描画を厳密にコントロール出来るので、かなり細かい演出ができると思いますがパスが多いオブジェクトをこれでやるのは凄い手間がかかるかと…。
最後に、描画完了後のコールバックの設定もできます。
コールバックはオプションの次の第３引数に関数をセットする形で使います。
1 | <div id="mySvg"></div> |
1 2 3 | new Vivus('my-div-id', {file: 'drawing.svg', duration: 1000},callbackFunc);function callbackFunc(){console.log(‘drawing!’)}; |
SVGのパスアニメーションは全部、JSの設定よりもパス自体を作る方が大変だと思います。
渾身の演出をしたアニメーションが活きるようなデザインを一度作ってみたいものですね。
