JavaScript/Animation/reverse

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

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

Anwendungsbeispiel[Bearbeiten]

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[Bearbeiten]