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 March 2020.
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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブアニメーション API
Animation
: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause()
: アニメーションを停止します。Animation.play()
: アニメーションを正方向に再生します。