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 |
浏览器兼容性
加载中…