JavaScript/Animation/reverse

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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