这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
动画
.playbackRate
特性为
Web 动画 API
returns or sets the playback rate of the animation.
Animations have a
playback rate
that provides a scaling factor from the rate of change of the animation's
timeline
time values to the animation’s current time. The playback rate is initially
1
.
var currentPlaybackRate = Animation.playbackRate; Animation.playbackRate = newRate;
Takes a number that can be 0, negative, or positive. Negative values reverse the animation. The value is a scaling factor, so for example a value of 2 would double the playback rate.
Setting an animation’s
playbackRate
to
0
effectively pauses the animation (however, its
playstate
does not necessarily become
paused
).
在
Growing/Shrinking Alice Game
example, clicking or tapping the bottle causes Alice's growing animation (
aliceChange
) to reverse, causing her to shrink:
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
}
// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
Contrariwise, clicking on the cake causes her to "grow," playing
aliceChange
forwards again:
var growAlice = function() {
aliceChange.playbackRate = 1;
aliceChange.play();
}
// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
In another example, the Red Queen's Race Game , Alice and the Red Queen are constantly slowing down:
setInterval( function() {
// Make sure the playback rate never falls below .4
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);
But clicking or tapping on them causes them to speed up by multiplying their
playbackRate
:
var goFaster = function() {
redQueen_alice.playbackRate *= 1.1;
}
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'Animation.playbackRate' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
playbackRate
|
Chrome 39 | Edge ≤79 | Firefox 48 | IE 不支持 No | Opera 26 | Safari 不支持 No | WebView Android 39 | Chrome Android 39 | Firefox Android 48 | Opera Android 26 | Safari iOS 不支持 No | Samsung Internet Android 4.0 |
完整支持
不支持
实验。期望将来行为有所改变。
用户必须明确启用此特征。
动画