Animation: reverse() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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();
};
仕様書
| Specification |
|---|
| Web Animations # dom-animation-reverse |
ブラウザーの互換性
Loading…
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause(): アニメーションを停止します。Animation.play(): アニメーションを正方向に再生します。