Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

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.

css3_javascript_animate

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)

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden.

magic-demo-site

Magic.css: Viel Bewegung auf der Website

CSS3 Animations sind im Kommen, aber noch nicht so weit verbreitet, wie man glauben könnte. Vor einigen Tagen erst stellten wir hier bei Dr. Web einen leicht verständlichen Pocket-Guide für Einsteiger in CSS3 Animations vor. Christian Pucci aus Italien, auf Github und auch sonst im Web unter dem Pseudonym miniMac unterwegs, erleichtert den Einsatz mit seinem stetig wachsenden Stylesheet Magic.css ganz ordentlich.

Von einem halben Dutzend Effekte im Juli 2013 steigerte er den Umfang auf 55 Effekte im Mai 2014. Neben den eigentlichen Effekten lässt sich noch die Zeitdauer der Ausführung, respektive bis zur Ausführung steuern. Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.

Auf der Demoseite zum Projekt können Sie alle verfügbaren Effekte ausprobieren, wenn auch die Umsetzung der Demo nur wenig beeindruckt. Ein roter Diamant wird auf die unterschiedlichen Weisen in das umgebende Quadrat hinein- oder hinausbewegt. Da hätte man sich etwas spannenderes vorstellen können. Sei’s drum, das Prinzip wird jedenfalls klar.

magic-einzeldemo
Magic.css Demo: Rechts den Effekt klicken, links den Diamanten in Bewegung sehen

Magic.css: weitere Effekte in Arbeit

Christian schraubt aktuell intensiv an dem Repository. Man wird wohl in Kürze mit weiteren Effekten rechnen dürfen. Das Stylesheet enthält alle Definitionen mit den erforderlichen Prefixes für alle modernen Browser, während die Demoseite selber zuverlässig nur im Chrome und Safari funktioniert.

Derzeit arbeitet Christian an der minifizierten Version, um die knapp 100 kb des Stylesheets nach unten zu drücken. Die minifizierte Datei liegt zwar schon im Repository, ist aber noch leer.

Magic.css vereinfacht die Anwendung von CSS3 Animations deutlich und gehört auf jeden Fall in Ihre Bookmark-Sammlung.

Links zum Beitrag