Web Animations API

Die Web Animations API ermöglicht das Synchronisieren und Timing-Changes für die Präsentation einer Webseite, d.h. die Animation von DOM-Elementen. Dies geschieht durch die Kombination von zwei Modellen: dem Timing-Modell und dem Animations-Modell.

Konzepte und Verwendung

Die Web Animations API bietet eine gemeinsame Sprache für Browser und Entwickler, um Animationen auf DOM-Elementen zu beschreiben. Um mehr Informationen über die Konzepte hinter der API und deren Verwendung zu erhalten, lesen Sie Verwendung der Web Animations API.

Web Animations Schnittstellen

Animation

Bietet Wiedergabesteuerungen und eine Zeitleiste für einen Animationsknoten oder -quelle. Kann ein Objekt verwenden, das mit dem KeyframeEffect() Konstruktor erstellt wurde.

KeyframeEffect

Beschreibt Sets von animierbaren Eigenschaften und Werten, sogenannte Keyframes, und deren Timing-Optionen. Diese können dann mit dem Animation() Konstruktor abgespielt werden.

AnimationTimeline

Stellt die Zeitleiste der Animation dar. Diese Schnittstelle existiert, um Zeitleistenmerkmale zu definieren (vererbt durch DocumentTimeline und zukünftige Zeitleistenobjekte) und wird nicht direkt von Entwicklern aufgerufen.

AnimationEvent

Teil des CSS Animations Moduls, das den Animationsnamen und die verstrichene Zeit erfasst.

DocumentTimeline

Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (zugänglich über die Document.timeline Eigenschaft).

Erweiterungen zu anderen Schnittstellen

Die Web Animations API fügt document und element Funktionen hinzu.

Erweiterungen der Document Schnittstelle

document.timeline

Das DocumentTimeline Objekt, das die Standarddokumentzeitleiste darstellt.

document.getAnimations()

Gibt ein Array von Animation Objekten zurück, die derzeit auf Elemente im document wirken.

Erweiterungen der Element Schnittstelle

Element.animate()

Eine Kurzschlussmethode zum Erstellen und Abspielen einer Animation auf einem Element. Es gibt die erstellte Animation Objektinstanz zurück.

Element.getAnimations()

Gibt ein Array von Animation Objekten zurück, die derzeit ein Element beeinflussen oder dies in Zukunft geplant haben.

Spezifikationen

Specification
Web Animations

Siehe auch