JavaScript/Animation/pause

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode Animation.pause() pausiert das Abspielen einer Animation. Dabei wird der playState aud den Wert paused gesetzt und die Animation.currentTime-Eigenschaft nicht weiter aktualisiert.

Browserunterstützung
caniuse.com

Alternativ können Sie die playbackRate auf 0 setzen.

Anwendungsbeispiel

Animation.play() ansehen ... 
 var planet = document.getElementById('earth'),
		Animation = planet.animate([{
	 transform: 'rotate(0deg)',
	 fill : 'blue'
 }, {
	 transform: 'rotate(360deg)',
	 fill : 'skyblue' 
 }
 ], {
 duration: 2000,
 iterations: Infinity,
 fill: 'forwards'
 });
	
 // activate control button
 document.querySelector('#play').addEventListener('click', togglePlayPause);
 
 function togglePlayPause () {
 document.querySelector('output').innerText = ' togglePlayPause';
	if (document.querySelector('#play').textContent == '❙❙') {
		document.querySelector('output').innerText = ' Pause';
		document.querySelector('#play').textContent = '►';
		Animation.pause();
	} else {
		document.querySelector('output').innerText = ' Play';
		document.querySelector('#play').textContent = '❙❙';
		Animation.play();		
		Animation.playbackRate = 1;				
	}
 }
Das Bedienfeld besteht aus einem button-Element mit einer id, dem mit addEventListener ein Eventhandler hinzugefügt wird .
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.

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Animation/pause&oldid=101875"