Animation: currentTime-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.

Die Animation.currentTime-Eigenschaft der Web Animations API gibt den aktuellen Zeitwert der Animation in Millisekunden zurück und setzt diesen, unabhängig davon, ob sie läuft oder pausiert ist.

Wenn der Animation eine timeline fehlt, sie inaktiv ist oder noch nicht abgespielt wurde, ist der Rückgabewert von currentTime null.

In diesem Artikel

Wert

Eine Zahl, die die aktuelle Zeit in Millisekunden repräsentiert, oder null, um die Animation zu deaktivieren.

Im Drink Me/Eat Me Spiel wird Alices Größe animiert, so dass sie von klein auf groß oder von groß auf klein wechseln kann. Zu Beginn des Spiels wird ihre Größe auf einen Wert zwischen den beiden Extremen eingestellt, indem die currentTime ihrer Animation auf die Hälfte der Dauer ihres KeyframeEffect gesetzt wird:

aliceChange.currentTime = aliceChange.effect.timing.duration / 2;

Ein allgemeinere Möglichkeit, auf die 50%-Marke einer Animation zu springen, wäre:

js
animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;

Reduzierte Zeitpräzision

Um Schutz vor Timing-Angriffen und Fingerprinting zu bieten, könnte die Präzision von animation.currentTime in Abhängigkeit von den Browsereinstellungen gerundet werden. In Firefox ist die privacy.reduceTimerPrecision-Einstellung standardmäßig aktiviert und auf 2 ms voreingestellt. Sie können auch privacy.resistFingerprinting aktivieren, in diesem Fall beträgt die Präzision 100 ms oder den Wert von privacy.resistFingerprinting.reduceTimerPrecision.microseconds, je nachdem, welcher größer ist.

Beispielsweise wird bei reduzierter Zeitpräzision das Ergebnis von animation.currentTime stets ein Vielfaches von 0,002 sein, oder ein Vielfaches von 0,1 (oder privacy.resistFingerprinting.reduceTimerPrecision.microseconds) mit aktiviertem privacy.resistFingerprinting.

js
// reduced time precision (2ms) in Firefox 60
animation.currentTime;
// Might be:
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animation.currentTime;
// Might be:
// 49.8
// 50.6
// 51.7
// …

Animation für andere Methoden und Eigenschaften, die Sie zur Steuerung der Animation auf Webseiten verwenden können.
Animation.startTime für die Zeit, zu der eine Animation gestartet werden soll.
Web Animations API

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Animations API
Animation
Konstruktor
1. Animation()
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
1. EventTarget
Verwandte Seiten für Web Animations
Anleitungen
1. Verwendung der Web Animations API
2. Konzepte der Web Animations API
3. Keyframe-Formate
4. Web Animation API Tipps und Tricks

Animation: currentTime-Eigenschaft

In diesem Artikel

Wert

Beispiele

Reduzierte Zeitpräzision

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN