JavaScript/Animation/pause

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.

Details: 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

• W3C: Pausing an animation
• MDN: Animation.pause()