Animation: playbackRate 屬性
Animation.playbackRate 屬性（屬於 Web Animations API）用於返回或設定動畫的播放速率。
動畫具有一個播放速率，該速率是動畫 timeline 時間值變化速率到動畫當前時間的縮放因子。播放速率的初始值為 1。
值
接受一個數字，可以是 0、負數或正數。負值會反轉動畫。該值是一個縮放因子，例如，值為 2 會使播放速率加倍。
注意：將動畫的 playbackRate 設定為 0 會有效地暫停動畫（但是，其 playState 不一定會變為 paused）。
示例
在 “愛麗絲的生長/收縮遊戲” 示例中，單擊或點選瓶子會使愛麗絲的生長動畫（aliceChange）反轉，從而使她縮小。
js
const shrinkAlice = () => {
aliceChange.playbackRate = -1;
aliceChange.play();
};
// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice);
bottle.addEventListener("touchstart", shrinkAlice);
反之，點選蛋糕會使她“生長”，再次正向播放 aliceChange。
js
const growAlice = () => {
aliceChange.playbackRate = 1;
aliceChange.play();
};
// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice);
cake.addEventListener("touchstart", growAlice);
在另一個示例 “紅皇后的賽跑遊戲” 中，愛麗絲和紅皇后一直在減速。
js
setInterval(() => {
// Make sure the playback rate never falls below .4
if (redQueenAlice.playbackRate > 0.4) {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9);
}
}, 3000);
但是，點選或觸控她們會使她們透過乘以她們的 playbackRate 來加速。
js
const goFaster = () => {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1);
};
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
規範
| 規範 |
|---|
| Web 動畫 # dom-animation-playbackrate |
瀏覽器相容性
載入中…