JavaScript | animate()でアニメーションの巻き戻し・逆再生
JavaScriptのanimate()メゾッドを使ったアニメーションの再生方向を反転させて、巻き戻し・逆再生に切り替える実装サンプルを紹介しています。
アニメーションの巻き戻し・逆再生
animate()メゾッドを利用したアニメーションの巻き戻し・逆再生を実装したシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | Stop and play animation with animate by yochans (@yochans) on CodePen.
HTMLはアニメーションさせたい要素としてdivタグで「.item」を設置しています。
また、逆再生に切り替えるボタン用にButtonタグを配置しています。
<div class="item"></div>
<p><Button id="reverse">REVERSE</Button></p>アニメーションさせるHTML要素「.item」には以下のCSSを指定しています。
.item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}animate()メゾッドで作成しているアニメーションの再生方向を反転させて巻き戻し・逆再生処理を行うにはreverse()メゾッドが利用可能となっています。
reverse()メゾッドは通常再生方向であれば逆再生に、逆再生中のアニメーションであれば通常方向の再生に切り替える事ができます。
stop()メゾッドで停止中のアニメーションに対しても有効です。
このメゾッドは対象のアニメーションに指定している「playbackRate」プロパティの値を変更します。
let anim = document.querySelector(`.item`).animate(
[
{ width: '0px' },
{ width: '320px' }
],
{
duration: 5000,
iterations: Infinity
}
);
document.querySelector(`#reverse`).addEventListener('click', () => {
anim.reverse();
});