Animation: thuộc tính playbackRate
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.
Thuộc tính Animation.playbackRate của Web Animations API trả về hoặc đặt tốc độ phát của hoạt ảnh.
Hoạt ảnh có một tốc độ phát cung cấp hệ số tỉ lệ từ tốc độ thay đổi của các giá trị thời gian của timeline của hoạt ảnh sang thời gian hiện tại của hoạt ảnh. Tốc độ phát ban đầu là 1.
Giá trị
Nhận một số có thể là 0, âm hoặc dương. Giá trị âm sẽ đảo ngược hoạt ảnh. Giá trị này là một hệ số tỉ lệ, vì vậy ví dụ giá trị 2 sẽ làm tăng gấp đôi tốc độ phát.
Note:
Việc đặt playbackRate của một hoạt ảnh thành 0 về thực chất sẽ tạm dừng hoạt ảnh (tuy nhiên, playState của nó không nhất thiết trở thành paused).
Ví dụ
Trong ví dụ Growing/Shrinking Alice Game, việc nhấp hoặc chạm vào chai khiến hoạt ảnh phóng to của Alice (aliceChange) đảo chiều, làm cô ấy thu nhỏ lại:
const shrinkAlice = () => {
aliceChange.playbackRate = -1;
aliceChange.play();
};
// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice);
bottle.addEventListener("touchstart", shrinkAlice);
Ngược lại, việc nhấp vào chiếc bánh khiến cô ấy "lớn lên", phát aliceChange theo chiều thuận một lần nữa:
const growAlice = () => {
aliceChange.playbackRate = 1;
aliceChange.play();
};
// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice);
cake.addEventListener("touchstart", growAlice);
Trong một ví dụ khác, Red Queen's Race Game, Alice và Red Queen liên tục chậm dần:
setInterval(() => {
// Make sure the playback rate never falls below .4
if (redQueenAlice.playbackRate > 0.4) {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9);
}
}, 3000);
Nhưng việc nhấp hoặc chạm vào họ sẽ khiến họ tăng tốc bằng cách nhân playbackRate của họ:
const goFaster = () => {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1);
};
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
Thông số kỹ thuật
| Specification |
|---|
| Web Animations # dom-animation-playbackrate |