どうもですよ、はやちですよ:D
今回はストロークアニメーションを簡単に操作できるvivus.jsをご紹介します！
導入と基本的な使い方
インストール
npmでのインストールはこちらから
npm install vivus
実装方法
html
いつも使っている、はやちのSVGにidを付与します。
<svg id="target-delayed" class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px" viewBox="0 0 96.9 97.6">
//省略
</svg>js
基本はアニメーションの時間、再生の仕方、必要であればコールバックの設定ができます。
new Vivus('target-delayed', {
duration: 100 , //アニメーションの時間
start: 'autostart', //アニメーションの自動再生
type: 'delayed' // アニメーションのタイプを設定
},function(obj){
//アニメーションの後にclassを付与してfillのアニメーションを実行
obj.el.classList.add('finished');
});出来上がったものはこちらになります。
※確認の際は「RERUN」ボタンを押してください
その他の使用方法
三種類のアニメーションパターンの設定の他にアニメーションの繰り返しや、巻き戻しの実装をすることも可能です。
これらの実装方法もご紹介します。
実装方法
３種類のアニメーション設定
typeオプションの方で(delayed,sync,oneByOne)を変更をすると、それぞれのアニメーションの設定が可能です。
//線が順に出るアニメーション
let targetDelayed = new Vivus('target-delayed', {
duration: 100 ,
start: 'autostart',
type: 'delayed' //アニメーション変更箇所
},function(obj){
obj.el.classList.add('finished');
});
//線が一斉に出てくるアニメーション
let targetSync = new Vivus('target-sync', {
duration: 100 ,
start: 'autostart',
type: 'sync' //アニメーション変更箇所
},function(obj){
obj.el.classList.add('finished');
});
//線が一筆ずつ出て来るアニメーション
let targetOne = new Vivus('target-one', {
duration: 100 ,
start: 'autostart',
type:'oneByOne' //アニメーション変更箇所
},function(obj){
obj.el.classList.add('finished');
});リプレイボタンの実装
設定した変数に対して3のメソッドでアニメーションをストップ→ストロークのリセット→再生を設定しました。
document.getElementById('replay').addEventListener('click',()=>{
//塗りをしている箇所のclassを削除
document.getElementById('target-delayed').classList.remove('finished');
document.getElementById('target-sync').classList.remove('finished');
document.getElementById('target-one').classList.remove('finished');
//アニメーションをストップ→リセット→再生
targetDelayed.stop().reset().play(1);
targetSync.stop().reset().play(1);
targetOne.stop().reset().play(1);
});逆再生ボタンの実装
play()メソッドの数値を負の数にすることによって逆再生を設定することができます。
document.getElementById('rewind').addEventListener('click',()=>{
if($('.svg').hasClass('finished')){
//アニメーションの逆再生
targetDelayed.play(-3);
targetSync.play(-3);
targetOne.play(-3);
setTimeout(()=>{
$('.svg').removeClass('finished');
},1200);
}
});設定出来るオプションとメソッド
今回ご紹介したもの以外にも、以下のオプションとメソッドが設定可能です。
Option list
| Name | Type | Description |
|---|---|---|
| type | string | delayed(遅延),sync(同時),oneByOne（一筆ずつ） |
| file | string | SVGを外部から適応することが可能 |
| start | string | アニメーションのトリガーを定義します。inViewport（viewport内で発火）,manual(手動で設定),autostart（自動再生） |
| duration | integer | アニメーションの長さを設定(デフォルト：200) |
| delay | integer | 最初と最後のパスの描画間のフレーム間の時間を設定 |
| onReady | function | 再生準備ができたときに呼び出される関数 |
| pathTimingFunction | function | easing設定用の関数 |
| dashGap | integer | 空白ダッシュの間に余分なマージン。 アニメーションの初期状態で不具合が発生した場合はそれを増やしてください |
| forceRender | boolean | ブラウザに、更新されたすべてのパス項目を再レンダリングさせます |
| reverseStack | boolean | 実行順序を逆にできます。最初のパスから最後のパスまでレンダリングした後に実行できます |
| selfDestroy | boolean | SVGのすべての余分なスタイリングを削除し、元のままにします |
method
| Name | Description |
|---|---|
| play(speed, callback) | パラメーターで指定された速度で再生します。アニメーション終了後にコールバックが実行されます |
| stop() | アニメーションを停止させます |
| reset() | SVGを元の状態に再初期化します |
| finish() | SVGを最終状態に設定します |
| setFrameProgress(progress) | アニメーションの進行状況を設定します。 進捗は0と1の間の数値でなければなりません |
| getStatus() | アニメーションのステータスを設定。start,progress,end |
| destroy() | SVGとインスタンスをリセットをします |
まとめ
いかがでしたか？ cssでも実装可能ではありますが、cssだとstroke-dasharrayとstroke-dashoffsetの数値が地味にめんどくさいなと思っておりました。vivus.jsではこの他に細かく線のdurationの設定することもできますし、小回りがきいて使いやすいのではと思います。
ではでは
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
