CREATIVE X 第2弾
CREATIVE X 第2弾
2018.04.29

ストロークアニメーションをラクラク操作! vivus.jsの使い方

はやち

どうもですよ、はやちですよ: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」ボタンを押してください

その他の使用方法

三種類のアニメーションパターンの設定の他にアニメーションの繰り返しや、巻き戻しの実装をすることも可能です。

これらの実装方法もご紹介します。

実装方法

3種類のアニメーション設定

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の設定することもできますし、小回りがきいて使いやすいのではと思います。

ではでは