Signatur
Beschreibung
Die Eigenschaft playbackRate eines Animation-Objekts ist ein Faktor, mit dem der Fortschritt der Zeitleiste auf die aktuelle Zeit (currentTime) der Animation übertragen wird. Der Standardwert ist 1. Bei 2 läuft die Animation doppelt so schnell, bei 0.5 halb so schnell. Negative Werte lassen sie rückwärts laufen, bei 0 bleibt sie faktisch stehen, obwohl ihr Zustand weiter "running" ist.
Die Eigenschaft eignet sich für Zeitlupen- oder Zeitraffer-Effekte, für Steuerelemente, mit denen Nutzer die Geschwindigkeit regeln, und dafür, Animationen per Vorzeichenwechsel umzukehren. Das Setzen von playbackRate verändert die Animation sofort. Die aktuelle Position (currentTime) bleibt dabei erhalten, sodass die Animation nicht springt.
Wenn du ruckelfrei zwischen Geschwindigkeiten wechseln willst, gerade bei Animationen, die auf dem Compositor-Thread laufen, ist Animation.prototype.updatePlaybackRate() meist die bessere Wahl. Diese Methode gleicht die neue Rate erst mit dem Compositor ab und übernimmt sie dann. Den noch ausstehenden Wert kannst du in der Zwischenzeit nicht über playbackRate auslesen, sondern erst, nachdem das Promise ready erfüllt ist.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 1 | Neue Wiedergaberate beim Setzen. Positive Werte laufen vorwärts, negative rückwärts, 0 hält die Animation an. Bruchzahlen sind erlaubt. |
Rückgabewert
1.Beispiele
Animation in Zeitlupe abspielen
const box = document.querySelector('.box');
const anim = box.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(300px)' }],
{ duration: 2000, iterations: Infinity }
);
console.log(anim.playbackRate); // Standardwert
anim.playbackRate = 0.25; // viermal langsamer
console.log(anim.playbackRate);Geschwindigkeit per Schieberegler steuern
// <input type="range" id="speed" min="0" max="4" step="0.1" value="1">
const spinner = document.querySelector('.spinner').animate(
[{ transform: 'rotate(0turn)' }, { transform: 'rotate(1turn)' }],
{ duration: 1000, iterations: Infinity }
);
document.querySelector('#speed').addEventListener('input', (event) => {
const rate = Number(event.target.value);
// updatePlaybackRate sorgt für einen ruckelfreien Übergang
spinner.updatePlaybackRate(rate);
});Animation per Vorzeichenwechsel umkehren
const menu = document.querySelector('.menu');
const slide = menu.animate(
[{ transform: 'translateY(-100%)' }, { transform: 'translateY(0)' }],
{ duration: 300, fill: 'both' }
);
slide.pause();
const toggleMenu = async () => {
// Richtung umdrehen und von der aktuellen Position aus weiterspielen
slide.playbackRate = -slide.playbackRate;
slide.play();
await slide.finished;
console.log(slide.playbackRate > 0 ? 'geöffnet' : 'geschlossen');
};
document.querySelector('#toggle').addEventListener('click', toggleMenu);// Wichtig · Fallstricke
- Setzen vs.
updatePlaybackRate(): Wenn duplaybackRatedirekt setzt, gilt die neue Rate sofort. Bei Animationen, die auf dem Compositor laufen, kann das zu kleinen Sprüngen führen. Für einen weichen Übergang während der Wiedergabe nimmst du besserupdatePlaybackRate(). - Rate
0: Die Animation steht still, aberplayStatebleibt"running"und das Promisefinishedwird nie erfüllt. Zum echten Anhalten verwendest dupause(). - Negative Rate und
play(): Wenn duplay()mit negativer Rate aufrufst undcurrentTimeam Anfang steht (0), springt die Animation ans Ende und läuft von dort rückwärts.reverse()kehrt das Vorzeichen um und startet die Animation in einem Schritt. - CSS-Animationen: Bei
CSSAnimation- undCSSTransition-Objekten ausdocument.getAnimations()kannst du die Rate ebenfalls ändern. Sie gilt aber nur für diese eine Instanz. Wird die CSS-Animation neu erzeugt, etwa durch einen Klassenwechsel, beginnt sie wieder mit der Rate1. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari 13.1+). Den Internet Explorer gibt es nicht mehr, dort fehlt die API vollständig.