Web Animations API

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Die Web Animations API ermöglicht die Synchronisierung und zeitliche Abstimmung von Änderungen an der Präsentation einer Webseite, d. H. der Animation von DOM-Elementen. Dabei werden zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.

Konzepte und Verwendung

Die Web-Animations-API bietet Browsern und Entwicklern eine gemeinsame Sprache, um Animationen auf DOM-Elementen zu beschreiben. Weitere Informationen zu den Konzepten der API und ihrer Verwendung finden Sie unter Verwenden der Web Animations-API.

Webanimationsschnittstellen

Animation
Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem KeyframeEffect() Konstruktor erstelltes Object aufnehmen.
KeyframeEffect
Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen. Diese können dann mit dem Animation() Konstruktor abgespielt werden. 
AnimationTimeline
Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von DocumentTimeline und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.
AnimationEvent
Eigentlich Teil von CSS-Animationen.
DocumentTimeline
Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft Document.timeline zugegriffen wird).
EffectTiming
Element.animate (), KeyframeEffectReadOnly.KeyframeEffectReadOnly () und KeyframeEffect.KeyframeEffect () akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.

Erweiterungen zu anderen Schnittstellen

 

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

Etweiterungen der Document Schnittstelle

document.timeline
Das DocumentTimeline Objekt stellt die Standardzeitleiste des Dokuments dar.
document.getAnimations()
Gibt ein Array von Animation - Objekten zurück, die derzeit für Elemente im document wirksam sind.

Erweiterungen der Element Schnittstelle

Element.animate()
Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte Animation Objektinstanz zurück.

Read-Only-Schnittstellen für Web-Animationen

Die folgenden Schnittstellen sind in der Spezifikation enthalten, z. B. um Features zu definieren, die an mehreren anderen Stellen verwendet werden, oder um als Basis für mehrere Schnittstellen zu dienen, die alle als Werte derselben Eigenschaften verwendet werden können. Du würdest diese nicht direkt in der Entwicklungsarbeit verwenden, aber für Bibliotheksautoren könnte es interessant sein, die Funktionsweise der Technologie zu verstehen, sodass ihre Implementierungen effektiver sein können, oder für Browseringenieure, die eine einfachere Referenz suchen, als die Spezifikation bietet.

AnimationEffectTimingReadOnly
Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen AnimationEffectTiming - Schnittstelle geerbt werden, die der KeyframeEffect zugeordnet ist.
AnimationEffectReadOnly
Defines current and future "Animation Effects" like KeyframeEffect, which can be passed to Animation objects for playing, and KeyframeEffectReadOnly which is used by KeyframeEffect (inherited by CSS Animations and Transitions). All values of Animation.effect are of types based on AnimationEffectReadOnly.
KeyframeEffectReadOnly
Describes sets of animatable properties and values that can be played using the Animation() constructor, and which are inherited by KeyframeEffect

Specifications

Specification Status Comment
Web Animations Arbeitsentwurf Initial definition

See also