SVGアニメーション – Web Animations API を使う – アニメーション実行中のreverseメソッドとplaybackRateプロパティについて

前回投稿したサンプルをもとに、アニメーション実行中のreverseの動きを詳しくみてみます。

まず、通常のアニメーション再生ではplay()メソッドを使い、「アニメーション開始→アニメーション終了」まで順再生されます。

次に下記のように逆再生(reverse()メソッド)を使った場合は、アニメーションが逆再生されます。

// アニメーション逆再生
reverse_animate_dom.addEventListener('click', (e) => {
	//animation1 = test1_dom.animate(keyframes1, options1);
	animation1.reverse();
	display_dom.innerHTML = animation1.playState;
}, false);

この時、逆再生中にもう一度「アニメーション逆再生」ボタンを押下すると順再生に戻ります。
これは「逆再生の逆は順再生」という意味の挙動になります。

別な逆再生の例として「Animation.playbackRate」をあげます。
本来の指定の仕方では逆再生用のプロパティではなく「再生速度の倍率」を表します。
playbackRateの値を「2」にすると、再生倍率は2倍になり、
「3」にすると再生倍率は3倍になります。

また負の数では逆方向への再生になり、「-2」だと逆再生方向に2倍の速度でアニメーションします。
「0」の場合にはアニメーションは停止します。

注意点としては、この「playbackRate」の値が「負の数値」を使った場合は、reverse()メソッドにかかわらず逆再生される点です。