Animation: playbackRate-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2020.
Die Animation.playbackRate-Eigenschaft der Web Animations API gibt die Wiedergaberate der Animation zurück oder legt sie fest.
Animationen haben eine Wiedergaberate, die einen Skalierungsfaktor vom Änderungsratenwert der timeline-Zeitwerte der Animation zur aktuellen Zeit der Animation bietet. Die Wiedergaberate ist anfangs 1.
Wert
Nimmt eine Zahl an, die 0, negativ oder positiv sein kann. Negative Werte kehren die Animation um. Der Wert ist ein Skalierungsfaktor, daher würde zum Beispiel ein Wert von 2 die Wiedergaberate verdoppeln.
Hinweis:
Das Setzen der playbackRate einer Animation auf 0 pausiert effektiv die Animation (jedoch wird ihr playState nicht unbedingt paused).
Beispiele
Im Beispiel Growing/Shrinking Alice Game führt ein Klick oder Tippen auf die Flasche dazu, dass die Wachstumsanimation von Alice (aliceChange) umkehrt und sie schrumpft:
const shrinkAlice = () => {
aliceChange.playbackRate = -1;
aliceChange.play();
};
// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice);
bottle.addEventListener("touchstart", shrinkAlice);
Andererseits führt ein Klick auf den Kuchen dazu, dass sie "wächst" und aliceChange wieder vorwärts abspielt:
const growAlice = () => {
aliceChange.playbackRate = 1;
aliceChange.play();
};
// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice);
cake.addEventListener("touchstart", growAlice);
In einem anderen Beispiel, dem Red Queen's Race Game, verlangsamen Alice und die Rote Königin ständig:
setInterval(() => {
// Make sure the playback rate never falls below .4
if (redQueenAlice.playbackRate > 0.4) {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9);
}
}, 3000);
Aber ein Klick oder Tippen auf sie beschleunigt sie, indem ihre playbackRate multipliziert wird:
const goFaster = () => {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1);
};
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
Spezifikationen
| Specification |
|---|
| Web Animations # dom-animation-playbackrate |
Browser-Kompatibilität
Loading…