Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen soll, um CSS3-Animationen zu erzeugen. Dabei ist JavaScript gerade für Animationen ein oft unverzichtbares Werkzeug. Denn manchmal müssen oder sollen einzelne Werte oder ganze Animationsabläufe errechnet werden.

CSS und JavaScript mit „animate()“-Methode kombinieren

Die neue „animate()“-Methode von JavaScript ermöglicht es, Animationen ausschließlich per JavaScript zu realisieren – allerdings unter Verwendung von CSS-Eigenschaften, um einzelne Keyframes für eine Animation zu definieren.

document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

Im Beispiel wird einem Element die Methode „animate()“ zugewiesen. Innerhalb eckiger Klammern werden beliebig viele Zustände einer CSS-Eigenschaft definiert – im Beispiel sind es Angaben für die Eigenschaft „height“. Jede Angabe wird als Objektliteral dargestellt. Es dürfen hierbei immer nur Werte für eine einzige CSS-Eigenschaft angegeben werden. Eine Kombination von „height“ und beispielsweise„width“ ist nicht möglich.

Zu beachten ist, dass die Werte für die CSS-Eigenschaften immer in Anführungszeichen stehen müssen. Die CSS-Eigenschaften selbst müssen JavaScript-konform angegeben werden, also „backgroundColor“ statt „background-color“.

In einem weiteren Objektliteral, das nach der eckigen Klammer folgt, werden Eigenschaften für die Animation definiert. Dazu gehören die Animationsdauer „duration“, die Anzahl der Wiederholungen „iteration“ sowie optional eine Verzögerung „delay“, welche festlegt, wann die Animation beginnen soll. Zeitangaben werden hierbei wie üblich in Millisekunden angegeben.

Mehrere Keyframes und ihre Dauer definieren

Für jede zu ändernde Eigenschaft muss die „animate()“-Methode separat aufgerufen werden. Will man neben der Höhe auch die Breite ändern, muss dies über einen erneuten Aufruf geschehen.

document.getElementById("element").animate([
  {width: "0", offset: 0},
  {width: "10%", offset, 1/3},
  {width: "100%", offset: 1}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

Im Beispiel wird für das Element die Breite geändert. Für die Animation sind drei verschiedene Zustände definiert. Die Breite soll von 0 über 10 Prozent bis 100 Prozent per Animation verändert werden. Die zusätzliche Option „offset“ gibt an, wieviel Zeit jeder definierte Zustand erhalten soll.

So wird die Animation von 0 zu 1o Prozent ein Drittel der Animation dauern, die Animation von 10 zu 100 Prozent zwei Drittel der Animation. Ausschlaggebend ist immer die Gesamtdauer der Animation, die per „duration“ angeben wird. In diesem Fall wird der erste Teil der Animation eine Sekunde dauern (ein Drittel von 3 Sekunden), der zweite Teil zwei Sekunden.

Statt den Wert für „offset“ als Bruch anzugeben, ist auch die Angabe als Dezimalzahl möglich. Der Wort muss hierbei zwischen 0 und 1 liegen, zum Beispiel „0.33“ statt „1/3“.

Weitere Animationsoptionen

Die „animate()“-Methode kennt weitere Optionen, um die Bewegung zu steuern, die auch von der CSS3-Eigenschaft „animation“ bekannt sind. So lassen sich die Richtung der Animation und die Beschleunigung definieren. Außerdem kann bestimmt werden, ob nach Ablauf der Animation wieder der Ausgangspunkt der Animation gezeigt werden soll.

document.getElementById("element").animate([
  …
], {
  duration: 3000,
  iteration: 2,
  delay: 1000,
  direction: "reverse",
  easing: "ease-in",
  fill: "forwards"
});

Der Wert für „direction“ gibt die Animationsrichtung an. So wird bei „reverse“ die Animation rückwärts abgespielt. „alternate“ spielt die Animation zunächst vorwärts, dann rückwärts ab. Und „alternate-reverse“ kombiniert die letzten beiden Werte.

Für „easing“ sind die gängigen Easing-Methoden von CSS3 möglich, also „ease-in“, „ease-out“ etc. Standardmäßig wird die Animation linear – also ohne Beschleunigung und Abbremsung – aufgeführt. Der Wert für „fill“ bestimmt, was nach Ablauf der Animation dargestellt werden soll. Standardmäßig wird der Ausgangspunkt der Animation wieder aufgerufen. Mit „forward“ bleibt nach Abschluss der Animation das letzte Keyframe der Animation stehen.

Animation steuern

Wird die „animate()“-Methode einer Variable zugewiesen, hat man die Möglichkeit, die Animation per JavaScript zu steuern. So ist es möglich, die Animation abspielen und stoppen zu lassen.

var animation = document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

document.getElementById("animation_start").addEventListener("click", function() {
  animation.play();
}, false);

document.getElementById("animation_pause").addEventListener("click", function() {
  animation.pause();
}, false);

Die Animation wird im Beispiel der Variable „animation“ zugewiesen. Anschließend werden zwei Elementen mit der ID „animation_start“ und „animation_pause“ Event-Listener zugewiesen, die dafür sorgen, dass beim Klick auf die Elemente die jeweils angegebenen Funktionen ausgeführt werden. Per „play()“ wird die Animation abgespielt, mit „pause()“ wird sie angehalten.

Außerdem ist es mit „reverse()“ möglich, die Animation rückwärts laufen zu lassen. Per „cancel()“ kann die Animation abgebrochen werden. Wird die Animation per „play()“ dann wieder gestartet, beginnt sie von vorne. Darüber hinaus nutzen Sie „finish()“, um die Animation zum Ende zu bringen, indem das letzte Keyframe angesteuert wird.

Event-Listener reagiert auf das Ende der Animation

Wer auf das Abspielende einer Animation reagieren möchte, kann den Event-Listener „finish“ nutzen. Dieser führt eine zu definierende Funktion aus, sobald das Ende einer Animation erreicht ist.

animation.addEventListener("finish", function() {
  alert("Die Animation wurde beendet.");
}, false);

Im Beispiel wird einfach eine Meldung ausgegeben, sobald das Ende der Animation erreicht ist.

Browser-Support

Die „animate()“-Methode ist derzeit noch in einem experimentellen Stadium und wird daher erst ab Chrome in der Version 36 implementiert sein. Wer es testen will, installiert sich Chrome Canary, die Entwicklerversion von Chrome.

(dpe)