Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 26. Juni 2015

CSS3: Animation mit play() und pause() steuern

Seit Einführung der „animate()“-Methode ist es möglich, CSS3-Animationen direkt per JavaScript zu erstellen, ohne dass diese in irgendeinem Stylesheet definiert sein müssen. Fortan können wir diese Animationen nun auch mit den Methoden „play()“ und „pause()“ steuern – also ganz so, wie man es von der Audio- und Videosteuerung her kennt. Darüber hinaus stehen mit „cancel()“ und „reverse()“ weitere Methoden zur Verfügung, die eine umfangreiche Steuerung von CSS3-Animationen ermöglichen.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

css3-playpause-teaser_DE

Anzeige

CSS3-Animation per „animate()“ erstellen

Zunächst einmal erstellen wir eine Animation per JavaScript und der „animate()“-Methode, denn es lassen sich keine Animationen steuern, die per CSS3-Eigenschaft „animation“ und der „@keyframes“-Regel über ein Stylesheet erstellt wurden.

var animation = document.getElementById("animation").animate([
  {transform: "rotate(0)"},
  {transform: "rotate(90deg)"}
 ], 5000);

Im Beispiel wird einem Element mit der ID „animation“ die „animate()“-Methode zugewiesen. Über diese Methode drehen wir das Element innerhalb von fünf Sekunden um 90 Grad. Wie die Animationen per JavaScript genau funktionieren, habe ich bereits in einem anderen Artikel erläutert. Über die Variable „animation“ ist es nun möglich, die Animation zu steuern.

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

Im Beispiel löst ein Click-Event die Methode „pause()“ aus, sobald das animierte Element angeklickt wird. Die Animation wird somit angehalten. Mit der Methode „play()“ wird die Animation fortgesetzt. Jetzt wird zum Pausieren und Fortsetzen häufig derselbe Button verwendet – im Beispiel ist es das animierte Element selbst, über welches die Wiedergabe gesteuert wird.

Um die Methoden „pause()“ und „play()“ je nach Status in einer Funktion anwenden zu können, gibt es bei Videos die Eigenschaft „played“, die einem verrät, ob das Video derzeit wiedergegeben wird oder nicht. Für die „animate()“-Methode steht leider keine Eigenschaft zur Verfügung, welche den Wiedergabestatus auslesen kann. Allerdings gibt es die Eigenschaft „currentTime“, welche die aktuelle Wiedergabezeit der Animation in Millisekunden einschließlich mehrerer Nachkommastellen misst und ausgibt.

Unter Zuhilfenahme dieser Eigenschaft lässt sich relativ einfach feststellen, ob die Animation gerade ausgeführt wird oder nicht.

var zeit;
document.getElementById("animation").addEventListener("click", function() {
  if (zeit == animation.currentTime) {
    animation.play();
  } else {
    zeit = animation.currentTime;
    animation.pause();
  }
}, false);

Im Beispiel definieren wir zunächst eine Variable „zeit“. Die darauf folgende Funktion prüft per „if“-Anweisung, ob der Wert von „zeit“ identisch ist mit der aktuellen Wiedergabezeit „currentTime“ der Animation. Da beim ersten Klick „zeit“ noch keinen Wert hat, wird der „else“-Abschnitt der Funktion ausgeführt. Das heißt, die Wiedergabezeit wird der Variablen „zeit“ zugewiesen und die Animation pausiert. Da die Wiedergabezeit steht, ist sie solange mit „zeit“ identisch, bis wir per „play()“ die Animation fortsetzen.

Mit dieser kleinen Abfrage wird per Klick auf das Animationselement die Wiedergabe angehalten und beim erneuten Klick fortgeführt.

Richtung und Geschwindigkeit ändern

animate-play-pause

Eine Besonderheit an den neuen Steuerungsmethoden für CSS3-Animationen ist die „reverse()“-Methode. Sie erlaubt es, eine Animation rückwärts abzuspielen. Ersetzt man im obigen Beispiel die Methode „pause()“ mit „reverse()“, kann man die Abspielrichtung der Animation per Mausklick jeweils umkehren.

animation.reverse();

Außerdem ist es möglich, mit der Eigenschaft „playbackRate“ die Abspielgeschwindigkeit zu ändern. Erlaubt ist ein beliebiger positiver oder negativer Dezimalwert. Der Wert 1 steht dabei für die normale Geschwindigkeit, die in der „animate()“-Methode vorgegeben wurde. Im Beispiel benötigt die Animation bei Normalgeschwindigkeit fünf Sekunden.

Ein Wert größer 1 lässt die Animation schneller abspielen. Bei einem Wert von 2 würde die Animation also in doppelter Geschwindigkeit laufen. Werte kleiner als 1 sorgen für eine langsamere Wiedergabe. Bei einer negativen Rate wird die Animation rückwärts abgespielt. Auch hier gilt, dass Werte größer -1 die Animation langsamer und Werte kleiner als -1 die Animation schneller abspielen.

animation.playbackRate = 1.5;

Hat „playbackRate“ den Wert 0, kommt die Animation zum Stillstand. Da die Geschwindigkeit während der Wiedergabe der Animation geändert werden kann, lassen sich zusammen mit „requestAnimationFrame()“ sehr einfach Beschleunigungen oder Abbremsungen in die Animation einbinden.

window.requestAnimationFrame(beschleunigung); 
function beschleunigung() {
  player.playbackRate += 0.05;
  window.requestAnimationFrame(beschleunigung);
}

Im Beispiel erhöhen wir die Geschwindigkeit bei jedem Framewechsel um 0,05, so dass die Animation stets beschleunigt, bis das Ende erreicht ist.

Als letzte Methode kennt die „animate()“-Steuerung noch„cancel()“. Sie sorgt dafür, dass die Animation unmittelbar abgebrochen wird und zum Ausgangspunkt zurückkehrt.

animation.cancel();

Auf das Ende einer Animation reagieren

Oftmals soll am Ende einer Animation eine Funktion ausgeführt werden, um beispielsweise etwas zu laden oder eine Meldung auszugeben. Über den Event-Handler „finish“ können wir am Abspielende einer Animation eine beliebige Funktion auslösen.

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

Im Beispiel wird das „finish“-Event per „addEventListener()“ der Variablen „animation“ zugewiesen. Sobald die Animation beendet wurde, wird per „console.log()“ ein Text in die Konsole geschrieben. Das „finish“-Event wird übrigens auch dann ausgelöst, wenn die Animation per „cancel()“ abgebrochen wird. Die Methode „pause()“ hingegen löst das Ereignis nicht aus.

 Browsersupport

Derzeit werden die hier vorgestellten Methoden und Eigenschaften zur Wiedergabesteuerung vom Chrome ab Version 39 unterstützt. Andere Browser kennen die Methoden noch nicht.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.