Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Das Animation Interface der Web Animations API repräsentiert einen einzelnen Animations-Player und bietet Wiedergabesteuerungen sowie eine Zeitleiste für einen Animationsknoten oder -quelle.

Konstruktor

Animation(): Erstellt eine neue Instanz eines Animation-Objekts.

Instanz-Eigenschaften

Animation.currentTime: Der aktuelle Zeitwert der Animation in Millisekunden, egal ob sie läuft oder pausiert ist. Wenn der Animation eine timeline fehlt, sie inaktiv ist oder noch nicht abgespielt wurde, ist ihr Wert null.
Animation.effect: Ruft den AnimationEffect ab oder setzt ihn, der mit dieser Animation verknüpft ist. Dies wird normalerweise ein KeyframeEffect Objekt sein.
Animation.finished Schreibgeschützt: Gibt das aktuelle Promise für den Abschluss dieser Animation zurück.
Animation.id: Ruft den String ab oder setzt ihn, der zur Identifikation der Animation verwendet wird.
Animation.overallProgress Schreibgeschützt Experimentell: Gibt eine Zahl zwischen 0 und 1 zurück, die den Gesamtfortschritt der Animation zu ihrem Endzustand anzeigt.
Animation.pending Schreibgeschützt: Gibt an, ob die Animation derzeit auf eine asynchrone Operation wartet, wie z.B. das Starten der Wiedergabe oder das Pausieren einer laufenden Animation.
Animation.playState Schreibgeschützt: Gibt einen enumerierten Wert zurück, der den Wiedergabestatus einer Animation beschreibt.
Animation.playbackRate: Ruft die Wiedergabegeschwindigkeit der Animation ab oder setzt sie.
Animation.ready Schreibgeschützt: Gibt das aktuelle Promise für die Bereitschaft dieser Animation zurück.
Animation.replaceState Schreibgeschützt: Gibt an, ob die Animation aktiv ist, nach dem Ersetzen durch eine andere Animation automatisch entfernt wurde oder durch einen Aufruf von Animation.persist() explizit gespeichert wurde.
Animation.startTime: Ruft die geplante Zeit ab oder setzt sie, wann die Wiedergabe einer Animation beginnen soll.
Animation.timeline: Ruft die timeline ab oder setzt sie, die mit dieser Animation verknüpft ist.

Instanz-Methoden

Animation.cancel(): Löscht alle durch diese Animation verursachten keyframeEffects und bricht deren Wiedergabe ab.
Animation.commitStyles(): Übernimmt den aktuellen Styling-Zustand einer Animation auf das animierte Element, auch nachdem die Animation entfernt wurde. Dies führt dazu, dass der aktuelle Style-Zustand in Form von Eigenschaften innerhalb eines style-Attributs auf das animierte Element geschrieben wird.
Animation.finish(): Sucht das Ende einer Animation, je nachdem, ob die Animation abgespielt oder rückwärts läuft.
Animation.pause(): Unterbricht die Wiedergabe einer Animation.
Animation.persist(): Speichert eine Animation explizit, um zu verhindern, dass sie automatisch entfernt wird, wenn eine andere Animation sie ersetzt.
Animation.play(): Startet oder setzt die Wiedergabe einer Animation fort bzw. startet sie neu, falls sie zuvor beendet wurde.
Animation.reverse(): Kehrt die Wiedergaberichtung um und stoppt am Anfang der Animation. Wenn die Animation beendet oder nicht abgespielt wurde, spielt sie von Ende zu Anfang.
Animation.updatePlaybackRate(): Setzt die Geschwindigkeit einer Animation, nachdem ihre Wiedergabeposition zunächst synchronisiert wurde.

Ereignisse

cancel: Wird ausgelöst, wenn die Methode Animation.cancel() aufgerufen wird oder die Animation von einem anderen Zustand in den idle-Wiedergabestatus wechselt.
finish: Wird ausgelöst, wenn die Animation das Abspielen beendet.
remove: Wird ausgelöst, wenn die Animation vom Browser automatisch entfernt wird.

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizitsyndrom (ADHS) sein. Außerdem können bestimmte Arten von Bewegungen Auslöser für vestibuläre Störungen, Epilepsie, Migräne und Skotopische Empfindlichkeit sein.

Es sollte eine Möglichkeit in Betracht gezogen werden, Animationen zu pausieren oder zu deaktivieren, und die Reduced Motion Media Query (oder äquivalenter User-Agent-Client-Hinweis Sec-CH-Prefers-Reduced-Motion) zu verwenden, um eine ergänzende Erfahrung für Benutzer zu schaffen, die den Vorzug angegeben haben, keine animierten Erlebnisse zu wünschen.

Spezifikationen

Specification
Web Animations # the-animation-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Web Animations API