JavaScript/Animation

Aus SELFHTML-Wiki
< JavaScript(Weitergeleitet von WAAPI)
Wechseln zu: Navigation, Suche

Die Web Animations API liefert mit dem Animation-Objekt und Element.animate() einen Animation-Player, in dem CSS-Eigenschaften durch JavaScript animiert und gesteuert werden können.

Details: caniuse.com

Vorüberlegungen

Auch wenn es lange verpönt war Webseiten zu animieren, spielen Animationen im Webdesign doch eine große Rolle.[1]

Mit der Web Animations API können Sie Elemente direkt animieren, ohne mit DOM-Manipulationen das style-Attribut zu verändern oder nur für die Animation benötigte Klassen hinzuzufügen oder zu entfernen. Auch der Aufruf eigens für die Animation geschaffener Funktionen mit setTimeout oder requestAnimationFrame gehört nun bald der Vergangenheit an. Zwar wird die API noch nicht von allen Browsern unterstützt, es gibt aber einen Polyfill, den Sie bequem einbinden können.

Eigenschaften

currentTime

Die Eigenschaft Animation.currentTime gibt bei einer laufenden oder pausierenden Animation die aktuelle Zeit in Millisekunden zurück. Wenn die Animation noch keine timeline hat, da sie noch inaktiv ist, hat sie den Wert 0.

Animation.currentTime ansehen …
window.setInterval(messageOutput, 100);
	
function messageOutput (){
  document.querySelector('#playState').innerText = Animation.playState;
  document.querySelector('#currentTime').innerText = Animation.currentTime;		
}
Das Beispiel zeigt eine Animation, die mit einem Klick auf Buttons gestartet, pausiert und beendet werden kann.
Anschließend werden playState und currentTime ausgegeben.

effect

Die Eigenschaft Animation.effect liest oder ändert den AnimationEffectReadOnly der Animation. Meist handelt es sich um das KeyframeEffect-Interface.

id

Die Eigenschaft Animation.id liest und setzt eine einzigartige id.

finished

Die Eigenschaft Animation.finished gibt den Promise zurück, der nach dem erneuten Abspielen aufgelöst wird.

playState

Die Eigenschaft Animation.playState setzt oder ändert den Abspiel-Status der Animation

Folgende Werte sind möglich:

  • idle: Die aktuelle Zeit ist unresolved und es gibt keine zu erledigenden Aufgaben
  • pending: Die Animation wartet auf die Erfüllung von Aufgaben um fortzusetzen
  • running: läuft, currentTime wird ständig aktualisiert und die playbackRate ist nicht 0
  • paused: Die Animation wurde unterbrochen und die Animation.currentTime-Eigenschaft wird nicht weiter aktualisiert.
  • finished: Die Animation hat das Ende erreicht und die Animation.currentTime-Eigenschaft wird nicht weiter aktualisiert.
Animation.playState ansehen …
window.setInterval(messageOutput, 100);
	
function messageOutput (){
  document.querySelector('#playState').innerText = Animation.playState;
  document.querySelector('#currentTime').innerText = Animation.currentTime;		
}
Das Beispiel zeigt eine Animation, die mit einem Klick auf Buttons gestartet, pausiert und beendet werden kann.
Anschließend werden playState und currentTime ausgegeben.

playbackRate

Die Eigenschaft Animation.playbackRate setzt oder ändert die Abspielrate der Animation.

Sie erwartet eine Zahlenangabe (Standardwert ist 1).

Ein negativer Wert sorgt dafür, dass die Animation rückwärts abgespielt wird.

Ein Wert von 0 lässt die Animation zum Stillstand kommen, der playState erhält aber nicht den Wert paused.

Durch eine Verdopplung der Abspielrate können Sie die Animation in der halben Zeit ablaufen lassen.

Animation.play() ansehen …
  <input id="rate" type="range" min="-4" max="4" value="0" />
Das Bedienfeld besteht aus einem input-Element vom type="range", das Werte von -4 bis +4 enthält. Der Anfangswert ist über das value-Attribut auf 0 gestellt.
  document.querySelector('#rate').addEventListener('change', changeSpeed);

  function changeSpeed () {
	Animation.playbackRate = document.querySelector('#rate').value;
  }
Anfangs läuft die Animation normal ab. Bei einer Veränderung des Schiebers wird der aktuelle Wert der playbackRate der Animation zugewiesen:
  • Bei einem positiven Wert wird die Animation in der „normalen“ Richtung abgespielt.
  • Bei einem Wert von 0 wird die Animation angehalten
  • Bei einem negativen Wert läuft die Animation rückwärts

ready

Die Eigenschaft Animation.ready (Readonly) gibt einen Promise zurück, wenn die Animation zum Abspielen bereit ist.


startTime

Die Eigenschaft Animation.startTime setzt oder ändert den Zeitpunkt, an dem das Playback der Animation, bzw. der erste KeyframeEffect starten soll.

Timeline

Die Eigenschaft Animation.timeline setzt oder ändert die timeline der Animation, die in der AnimationTimeline-API festelegt ist. In ihr werden Zeitwerte abgelegt, um sie zur Synchronisation mit anderen Animationen zu verwenden.


Anwendungsbeispiele

Polyfill

Auch wenn der Edge die Web Animations API noch nicht unterstützt, ist eine Entwicklung mittelfristig geplant.[2]. Da es einen Polyfill gibt, steht einem Einsatz aber auch heute schon nichts im Wege.

Polyfill
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>

Quellen

  1. http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/
  2. Microsoft Edge Platform Status: Web Animations API

Weblinks


englisch:



Demos:

Polyfill