JavaScript/Animation/reverse

Der Begriff reverse ist mehrdeutig.
Dieser Artikel behandelt Animation.reverse(). Für die gleichnamige Methode des Array-Objekts siehe JavaScript/Objekte/Array/reverse.

Die Methode Animation.reverse() ändert die Richtung, in der eine Animation abgespielt wird.

Details: caniuse.com

Alternativ können Sie die playbackRate auf einen negativen Wert setzen.

Anwendungsbeispiel

Animation.reverse() 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 buttons	
  document.querySelector('#back').addEventListener('click', runBackwards);
  document.querySelector('#play').addEventListener('click', togglePlayPause);
  document.querySelector('#forward').addEventListener('click', runForwards);   

  function runBackwards () {
	Animation.reverse();
  }  

  function runForwards () {
    Animation.playbackRate = 3;			
  }    
  
  function togglePlayPause () {
	if (document.querySelector('#play').textContent == '❙❙') {
		document.querySelector('#play').textContent = '►';
		Animation.pause();
	} else {
		document.querySelector('#play').textContent = '❙❙';
		Animation.play();		
		Animation.playbackRate = 1;				
	}
  }

Mit einem Klick auf ◀ wird die Funktion runBackwards aufgerufen. Sie ändert die Richtung der Animation. Wenn vorher der Schnellvorlauf gedrückt wurde und die Animation mit dreifacher Geschwindigkeit läuft, kehrt sich die Richtung um, die playbackRate bleibt auf (-) 3.

Weblinks

• W3C: Reversing an animation
• MDN: Animation.reverse()