AnimationEffect.getTiming() — Methode · JavaScript-Referenz

Signatur

AnimationEffect.prototype.getTiming()

Beschreibung

getTiming() liefert die angegebenen Timing-Werte eines AnimationEffect – meist eines KeyframeEffect, den man über animation.effect erreicht. Enthalten sind die Werte, die beim Erstellen der Animation übergeben wurden, etwa über element.animate(keyframes, options), bzw. die Standardwerte für alle nicht gesetzten Eigenschaften.

Das zurückgegebene Objekt hat die Eigenschaften delay, endDelay, fill, iterationStart, iterations, duration, direction und easing. Es ist eine Kopie: Wenn man sie ändert, ändert sich an der laufenden Animation nichts. Zum Ändern verwendet man updateTiming().

Die Methode ist praktisch, wenn man Animationen untersuchen, protokollieren oder abhängig von ihren aktuellen Einstellungen anpassen will, zum Beispiel um die Dauer zu verdoppeln oder CSS-Animationen und -Übergänge (über document.getAnimations()) auszuwerten. Werte, die zur Laufzeit berechnet werden (Fortschritt, aktuelle Iteration, tatsächliche Dauer bei "auto"), liefert dagegen getComputedTiming().

Rückgabewert

Typ

EffectTiming

Beschreibung

Beispiele

Timing einer Web Animation auslesen

const box = document.querySelector('.box');

const animation = box.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(300px)' }],
  { duration: 1200, iterations: 3, easing: 'ease-in-out', direction: 'alternate' }
);

const timing = animation.effect.getTiming();
console.log(timing);

{ delay: 0, direction: "alternate", duration: 1200, easing: "ease-in-out", endDelay: 0, fill: "auto", iterationStart: 0, iterations: 3 }

Dauer ausgehend vom aktuellen Wert verdoppeln (Zeitlupe)

const slowDown = (animation, factor = 2) => {
  const { duration } = animation.effect.getTiming();
  if (typeof duration === 'number') {
    animation.effect.updateTiming({ duration: duration * factor });
  }
};

const anim = document.querySelector('.spinner').animate(
  [{ rotate: '0deg' }, { rotate: '360deg' }],
  { duration: 800, iterations: Infinity }
);

slowDown(anim);
console.log(anim.effect.getTiming().duration);

1600

CSS-Animationen auf der Seite untersuchen

// Listet alle laufenden CSS-Animationen/-Übergänge mit ihrer Dauer auf
for (const anim of document.getAnimations()) {
  const { duration, delay, iterations } = anim.effect.getTiming();
  console.log(
    anim.animationName ?? anim.transitionProperty ?? anim.id,
    `${duration} ms, Verzögerung ${delay} ms, ${iterations}×`
  );
}

fade-in 500 ms, Verzögerung 0 ms, 1× opacity 300 ms, Verzögerung 100 ms, 1×

Zurückgegebenes Objekt ist nur eine Kopie

const anim = document.body.animate([{ opacity: 0 }, { opacity: 1 }], 1000);

const timing = anim.effect.getTiming();
timing.duration = 5000; // wirkt NICHT auf die Animation

console.log(anim.effect.getTiming().duration);

anim.effect.updateTiming({ duration: 5000 }); // so ändert man sie
console.log(anim.effect.getTiming().duration);

1000 5000

// Wichtig · Fallstricke

Angegebene statt berechnete Werte: Bei duration: "auto" gibt getTiming() auch "auto" zurück und nicht die tatsächliche Dauer. Wenn du die effektive Dauer, activeDuration, endTime oder progress brauchst, nimm getComputedTiming().
Kopie, keine Referenz: Wenn du das zurückgegebene Objekt änderst, bleibt die Animation gleich. Ändern kannst du sie nur mit updateTiming().
Bei animation.effect auf null prüfen: Eine Animation kann ohne Effekt existieren. In dem Fall wirft animation.effect.getTiming() einen TypeError. Optional Chaining hilft: animation.effect?.getTiming().
CSS-Animationen: Hier kommen die Werte aus den CSS-Eigenschaften (animation-duration usw.), umgerechnet in Millisekunden. fill spiegelt animation-fill-mode wider.
Kompatibilität: Wird von Chrome/Edge 75+, Firefox 63+ und Safari 13.1+ unterstützt. Ältere Implementierungen hatten stattdessen die veraltete Eigenschaft effect.timing. Die Methode gibt es auch nicht in Node.js, weil sie Teil der Web Animations API im Browser ist.

Siehe auch

Element.animate() AnimationEffect.getComputedTiming() AnimationEffect.updateTiming() Animation.finish() Animation.persist()