Animation: currentTime-Eigenschaft

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:

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

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.

// 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