JavaScript/Tutorials/Web Animations/Animationen steuern
- 15min
- mittel
- ● CSS-Animation
● DOM-Manipulation
Einer der Nachteile von CSS-Animation ist das Fehlen von Steuerungsmöglichkeiten. So kann man mit :hover die animation-playstate-Eigenschaft auf paused setzen, mehr aber auch nicht.
Ein komfortabler Bildwechsler sollte auch manuell startbar sein, ohne dass er automatisch nach dem Laden der Seite anläuft. Ebenso soll er auch anhaltbar sein, damit man ihn auf Knopfdruck stoppen kann, und er soll eine Einzelschritt-Funktion (natürlich vorwärts und rückwärts) sowie eine Zufallswiedergabe besitzen. Und selbstverständlich sollte er so robust geschrieben sein, dass eine "Fehlbedienung" ausgeschlossen ist.
Inhaltsverzeichnis
Pausieren bei mouseover
Jede Animation mit der WAAPI ist ein eigenes Animations-Objekt mit Eigenschaften und Methoden, die Sie abrufen und auch setzen können. So können Sie über die Methoden play() eine Animation starten, mit pause() unter- und mit cancel() ganz abbrechen.
var marquee = changer.animate([{
...
});
changer.addEventListener('mouseenter', pauseMarquee, false);
changer.addEventListener('mouseleave', playMarquee, false);
function playMarquee(){
if( marquee.playState === 'paused' ) marquee.play();
}
function pauseMarquee(){
if( marquee.playState === 'running' ) marquee.pause();
}
An den Bildwechsler werden mit addEventListener die Funktionen play- bzw. pauseMarquee angehängt. Sie überprüfen den playState der Animation und setzen ihn so, dass die Animation beim Hovern mit der Maus oder Berühren mit Finger pausiert und wenn das Ereignis mouseleave gefeuert wird, wieder aufgenommen wird.
Alternativ könnte mit querySelector geprüft werden, ob .gallery:hover erfüllt ist.
Steuerung mit Tastatur und Maus
HTML des Bedienfelds
Für eine komfortable Steuerung benötigen Sie ein Bedienfeld mit mehreren Kontrollelementen.
<div id="controls">
<button id="back" aria-label="run animation backwards">
◀◀
</button>
<button id="play" aria-label="play/pause animation">
<span class="playing">❙❙</span>
<span class="pausing">►</span>
</button>
<button id="forward" aria-label="choose next picture in animation">
►►
</button>
</div>
Das Bedienfeld besteht aus drei button-Elementen mit ids. Falls die Unicode-Symbole nicht gelesen werden können, stehen aria-label mit alternativen Erklärungen zur Verfügung.
Der Pause-Button enthält ein weiteres span-Element, das vorerst ausgeblendet ist und beim Pausieren anstelle des bisherigen Inhalts eingeblendet wird ((einem Toggle-Mechanismus)).
Animationen mit JavaScript steuern
// activate control buttons
document.querySelector('#back').addEventListener('click', runBackwards);
document.querySelector('#play').addEventListener('click', togglePlayPause);
document.querySelector('#forward').addEventListener('click', runForwards);
function runBackwards () {
marquee.playbackRate = -3;
}
function runForwards () {
marquee.playbackRate = 3;
}
function togglePlayPause () {
if (document.querySelector('#play').textContent == '❙❙') {
document.querySelector('#play').textContent = '►';
marquee.pause();
} else {
document.querySelector('#play').textContent = '❙❙';
marquee.play();
marquee.playbackRate = 1;
}
}
Das Bedienfeld besteht aus drei button-Elementen mit ids. Den Buttons werden mit addEventListener Eventhandler hinzugefügt.
Die Funktionen runBackwards() und runForwards() lassen die Animation im Schnellvor bzw. Rücklauf mit dreifacher Geschwindigkeit ablaufen.
Die Funktion togglePlayPause() überprüft in einer if-Verzweigung, ob der Button das Pause-Symbol anzeigt. Fall dies zutrifft, wird mit textContent das dreieckige Play-Symbol gesetzt und die Animation mit animation.pause() angehalten. Wenn der Pause-Button bereits gedrückt war, trifft dies nicht zu und die Animation wird mit Animation.play() wieder gestartet. Der Textinhalt des Buttons erhält wieder das Pause-Zeichen.
Bei der Funktion runBackwards() wurde auf die Verwendung von reverse() verzichtet, da ansonsten bei allen anderen Funktionen die Laufrichtung überprüft werden müsste.
Animation-Events
Mit der WAAPI können Sie auch überwachen, ob die Animation beendet oder abgebrochen wurde. Dafür gibt es eigene Events:
marquee.addEventListener('cancel', function() {
document.querySelector('output').innerText = 'So langweilig war das doch nicht! Warum haben Sie abgebrochen?';
});
marquee.addEventListener('finish', function() {
document.querySelector('output').innerText = 'Dia-Abend erfolgreich geschafft! Jetzt dürfen Sie ans Büffet!';
});
Das Script wird um zwei Event-Listener erweitert, die mit addEventHandler an die Animation angehängt werden. Sobald sie Animation beendet ist oder vom Nutzer abgebrochen wurde, wird eine Nachricht in das output-Element ausgegeben.
Fazit
Mit diesem Script haben wir einen Player, der eine Animation abspielen, auf Wunsch aber auch stoppen oder rückwärts laufen lassen kann. Im nächsten Kapitel wollen wir anstelle eines Karussells die Bilder nacheinander fließend einblenden.
