JavaScript/Tutorials/Web Animations/Animieren in JavaScript

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Grundlage jeder Animation in JavaScript ist das zeitgesteuerte Verändern von CSS-Eigenschaften bestimmter HTML-Elemente.

Heute verwendet man dazu das Animation-Objekt, um die CSS-Eigenschaften eines HTML-Elements direkt ändern zu können. Während früher die Werte in eigens geschriebenen Animationsfunktionen schrittweise bei jedem Aufruf mit setTimeout oder requestAnimationFrame immer wieder verändert werden mussten, berechnet heute der Browser diese Zwischenschritte selbstständig.


Ladebalken

Ein Beispiel für eine sehr einfache Animation ist ein Ladebalken, denn hier wird die Breite eines Elements vergrößert. Das lässt sich relativ leicht bewerkstelligen.

Beispiel ansehen …
  function animiere() { 
    var ladebalken = document.getElementById('ladebalken');
    ladebalken.animate(
      [
        {
        width: '1em',
        background: 'green'
        }, {
        width: '20em',
        background: 'lime'
        }
      ], {
      duration: 2000,
      iterations: 1,
      fill: 'forwards'
    });
  }

In diesem Beispiel wird in einem script-Bereich eine Funktion (animiere) definiert. Diese Funktion legt sich eine Referenz auf das betreffende HTML-Element mit der id ladebalken in einer Variablen ab, um bequem darauf zurückgreifen zu können.

Beim Auslösen der Funktion werden die Breite und Farbe des span-Elements, das diese id enthält, animiert.

Innerhalb der eckigen Klammern werden die keyframes der Animation notiert:

  • Ausgangspunkt ist eine Breite von 1em und die Hintergrundfarbe 'green'
  • Endpunkt ist eine Breite von 20em und eine hellerer Hintergrund 'lime'

Danach folgen (optionale) Timing Options:

  • duration: 2000 eine Dauer von 2 Sekunden (in Millisekunden)
  • iterations: 1 legt eine einmalige Durchführung fest
  • fill: 'forwards' legt fest, dass das animierte Objekt im Endzustand der Animation bleibt und nicht zum Ausgangspunkt mit 1em Breite zurückspringt.


Beachten Sie: Sowohl die Keyframes als auch die Timing Options werden in Literal-Schreibweise notiert. Die einzelnen Werte werden durch Kommata getrennt; am Ende einer Aufzählung darf aber kein Komma mehr stehen.
Dieser Umstand sorgt immer wieder für Fehlerquellen und sollte deshalb von jedem Script-Autor jedes Mal peinlich genau überprüft werden.
Beachten Sie, dass der Wert forwards genauso wie die anderen Werte für die CSS-Eigenschaften aus Zeichenketten bestehen und deshalb in Anführungszeichen gesetzt werden müssen. Ohne Anführungszeichen wird eine Variablendeklaration gesucht.


Um dieses und die folgenden Beispiele auch in älteren Browsern ausprobieren zu können, wurde ein Polyfill eingebunden:

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

Ball

Die Animation kann aber auch aus mehreren Schritten bestehen und vorher definiert werden:

Beispiel ansehen …
var moveAndChangeColor = [
    { 
        transform: 'translate(0, 0)',
        background: 'green'    
    },
    { 
        transform: 'translate(200px, 200px)',
        background: 'lime'    
    },
    {
        transform: 'translate(300px, 100px)',
        background: 'green'   
    },
    {
        transform: 'translate(0px, 0px)',
        background: 'lime'   
    }
];

var circle = document.getElementById('circle');

document.querySelector('#interaktiv').addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 2500,
        iterations: 2,
        fill: 'forwards'
    });
});

Die Variable moveAndChangeColor enthält die keyframes einer Animation, in der in jedem keyframe eine Verschiebung mit transform: translate() festgelegt wird. Um die einzelnen keyframes optisch voneinander zu trennen, ändert sich die Hintergrundfarbe wechselweise von 'green' auf 'lime'.

Beim Auslösen der Funktion durch einen Klick auf den Button wird eine anonyme Funktion aufgerufen, die den Kreis mit animate() animiert. Dabei enthält die animate-Methode zwei Argumente:

  • die in der Variable moveAndChangeColor festgelegten keyframes
  • Timing Options:
    • duration: 2500 eine Dauer von 2,5 Sekunden (in Millisekunden)
  • iterations: 2 legt eine zweimalige Durchführung fest
  • fill: 'forwards' legt fest, dass das animierte Objekt im Endzustand der Animation bleibt.


Bilderkarussell

Das CSS-Bilderkarussell litt unter zwei Mankos, zum einen mussten bei einer Änderung der Bildanzahl die keyframes angepasst und mühsam von Hand neu berechnet werden, zum anderen war es nur bedingt responsiv, da der gallery, bzw. dessem Elternelement die feste Höhe fehlte.

Beispiel ansehen …
// Auswahl des Bildwechslers und seiner Kindelemente
var changer = document.querySelector( '#gallery' ),
  children = changer.querySelectorAll( 'figure'),
  container = document.querySelector( '#container'),
  newWidth = (children.length* 100) + '%';
	  
// sets container, puts figure-elements horizontal 
 container.classList.add('container');
 changer.classList.add('changer');
 changer.style.width = newWidth;	
 var newMargin = ((children.length-1)* -100) + '%';
	 
// animate changer
var marquee = changer.animate([{
       marginLeft: '0%'
    }, {
      marginLeft: newMargin
    }
    ], {
      duration: children.length * 3000,
      directions: 'alternate',
      iterations: Infinity
    });
}

Ohne JavaScript werden die Bilder untereinander angezeigt.
Beim Laden des JavaScripts erhält die gallery eine neue Klasse changer. In ihr werden die Bilder waagerecht angeordnet; durch die ebenfalls neu hinzugefügte Klasse container des Elternelements ist aber immer nur ein Bild sichtbar.

Neben der Klasse erhält die gallery auch noch mit style.width eine Breite, die sich aus der mittels querySelectorAll ermittelten Anzahl der vorhandenen figure-Elemente ergibt.
Der changer wird nun animiert. Durch eine Verschiebung des linken Randes laufen die Bilder in einer Dia-Show nacheinander ab. Dabei wird der Maximalwert wieder aus der Anzahl der vorhandenen Bilder dynamisch ermittelt. Auch die Dauer der Animation wird in duration: children.length * 3000, von der Anzahl der in der Animation vorhandenen Bilder bestimmt.
Am Ende der Animation wird mit direction die Richtung der Animation geändert; die timing option iterations legt die Anzahl der Wiederholungen fest, beim Schlüsselwort Infinity also unendlich.

Beachten Sie: Abweichend von CSS-Animations, in der die Anzahl Wiederholungen mit der Eigenschaft animation-iteration-count und der Zeichenkette 'infinite' festgelegt wird, verwendet die API die Eigenschaft iterations und das Schlüsselwort Infinity, dass ohne Anführungszeichen notiert wird.

Mit nur wenigen Zeilen JavaScript können beliebige Bildergalerien zu einem Karussell animiert werden. Allerdings laufen die Bilder hier nur durch und werden nicht einzeln für sich angezeigt. Im nächsten Beispiel stellen wir Ihnen ein Bilderkarussell vor, das Sie bequem starten, pausieren oder schneller laufen lassen können.

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Web_Animations/Animieren_in_JavaScript&oldid=97956“