diff options
Diffstat (limited to 'files/de/web/api/web_animations_api/index.html')
| -rw-r--r-- | files/de/web/api/web_animations_api/index.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html new file mode 100644 index 0000000000..ad88873dfd --- /dev/null +++ b/files/de/web/api/web_animations_api/index.html @@ -0,0 +1,99 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +translation_of: Web/API/Web_Animations_API +--- +<p>{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}</p> + +<div class="summary"> +<p>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.</p> +</div> + +<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2> + +<p>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 <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Verwenden der Web Animations-API</a>.</p> + +<h2 id="Webanimationsschnittstellen">Webanimationsschnittstellen</h2> + +<dl> +</dl> + +<dl> + <dt>{{domxref("Animation")}}</dt> + <dd>Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} Konstruktor erstelltes Object aufnehmen.</dd> + <dt>{{domxref("KeyframeEffect")}}</dt> + <dd>Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen.<strong> </strong>Diese können dann mit dem {{domxref("Animation.Animation", "Animation()")}} Konstruktor abgespielt werden. </dd> + <dt>{{domxref("AnimationTimeline")}}</dt> + <dd>Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von {{domxref ("DocumentTimeline")}} und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.</dd> + <dt>{{domxref("AnimationEvent")}}</dt> + <dd>Eigentlich Teil von CSS-Animationen.</dd> + <dt>{{domxref("DocumentTimeline")}}</dt> + <dd>Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft {{domxref ("Document.timeline")}} zugegriffen wird).</dd> + <dt>{{domxref("EffectTiming")}}</dt> + <dd>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} und {{domxref ("KeyframeEffect.KeyframeEffect ()")}} akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.</dd> +</dl> + +<h2 id="Erweiterungen_zu_anderen_Schnittstellen">Erweiterungen zu anderen Schnittstellen</h2> + +<p> </p> + +<p>Die Web-Animations-API fügt {{domxref ("document")}} und {{domxref ("element")}} einige neue Funktionen hinzu.</p> + +<h3 id="Etweiterungen_der_Document_Schnittstelle">Etweiterungen der <code>Document</code> Schnittstelle</h3> + +<dl> + <dt>{{domxref("document.timeline")}}</dt> + <dd>Das <code>DocumentTimeline</code> Objekt stellt die Standardzeitleiste des Dokuments dar.</dd> + <dt>{{domxref("document.getAnimations()")}}</dt> + <dd>Gibt ein Array von {{domxref ("Animation")}} - Objekten zurück, die derzeit für Elemente im <code>document</code> wirksam sind.</dd> + <dt> + <h3 id="Erweiterungen_der_Element_Schnittstelle">Erweiterungen der <code>Element</code> Schnittstelle</h3> + </dt> + <dt>{{domxref("Element.animate()")}}</dt> + <dd>Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte {{domxref ("Animation")}} Objektinstanz zurück.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Read-Only-Schnittstellen_für_Web-Animationen">Read-Only-Schnittstellen für Web-Animationen</h2> + +<p>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.</p> + +<dl> + <dt>{{domxref("AnimationEffectTimingReadOnly")}}</dt> + <dd>Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen {{domxref ("AnimationEffectTiming")}} - Schnittstelle geerbt werden, die der {{domxref ("KeyframeEffect")}} zugeordnet ist.</dd> + <dt>{{domxref("AnimationEffectReadOnly")}}</dt> + <dd>Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> and <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a>). All values of {{domxref("Animation.effect")}} are of types based on <code>AnimationEffectReadOnly</code>.</dd> + <dt>{{domxref("KeyframeEffectReadOnly")}}</dt> + <dd>Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation", "Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Animations')}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li> + <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li> + <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li> + <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li> + <li> + <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p> + </li> +</ul> |