Animation: reverse() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。
Animation.reverse() は Animation インターフェイスのメソッドで、再生方向を逆にします。つまり、アニメーションはその先頭で終わります。再生されていないアニメーションで呼び出されると、アニメーション全体が逆再生されます。一時停止しているアニメーションで呼び出されると、アニメーションは逆に続けられます。
構文
js
reverse()
引数
なし。
返値
なし (undefined)。
例
アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、ボトルをクリックまたはタップすると、アリスの成長アニメーション (aliceChange) が逆再生され、アリスが小さくなります。これは aliceChange の Animation.playbackRate を -1 に設定することで行います。
js
const shrinkAlice = () => {
// play Alice's animation in reverse
aliceChange.playbackRate = -1;
aliceChange.play();
// play the bottle's animation
drinking.play();
};
But it could also have been done by calling reverse() on aliceChange like so:
js
const shrinkAlice = () => {
// play Alice's animation in reverse
aliceChange.reverse();
// play the bottle's animation
drinking.play();
};
仕様書
| 仕様書 |
|---|
| Web Animations # dom-animation-reverse |
ブラウザーの互換性
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause(): アニメーションを停止します。Animation.play(): アニメーションを正方向に再生します。