setInterval() – Javascript Animationen

setInterval steuert Animationen mit Javascript

Javascript-Animationen mit setInterval( function(){} , d ) wiederholen Anweisungen in einem Interval von d Millisekunden. Dabei entsteht eine Sequenz von Einzelbildern oder Frames, die so schnell aufeinander folgen, dass die Bewegung fließend und natürlich wirkt.

Während setTimeout(action,timeout) Anweisungen nach einer Verzögerung von timeout Millisekunden einmal ausführt, wiederholt Javascript die Anweisungen mit setInterval( action, i) in einem Intervall von i Millisekunden.

Für eine fließende Animation wie der Farbroller muss setTimeout rekursiv ausgeführt werden, aber dann gibt es immer noch einen kleinen Unterschied:

     +-- Referenz für den Aufruf von cancelInterval
     |
     |             Verzögerung / Delay --+
     |                                   |
var ref = window.setInterval( animate, 1000);
                                  |
                                  +-- callback
function animate() {
  // Anweisungen der Animation
}
	function painter () {
		var roller = document.querySelector("#roller");
		let angle = parseInt(roller.getAttribute("transform").replace(/rotate\(|\)/gi,""));
		if (angle > -75 && turned === false) {
			angle -= 1;
			roller.setAttribute("transform","rotate(" + angle + " 579 69)");
		} else if (angle <= -75) {
			turned = true;
			angle += 1;
			roller.setAttribute("transform","rotate(" + angle + " 579 69)");
		} else if (angle === 0) {
			turned = false;
		} else {
			angle += 1;
			roller.setAttribute("transform","rotate(" + angle + " 579 69)");
		}
	}
	var rollon = setInterval (painter, 40);

setInterval mit closures

Alternativ kann setInterval( action , delay) mit einer anonymen Funktion aufgerufen werden. Das hält den Scriptcode besser zusammen als var interval = window.setInterval(code, delay) und ersetzt auch eine externe Funktion.

6
let timerId = setInterval ( function tick() {
   let counter = parseInt(document.getElementById("counter").textContent);
   if (counter < 1) {
      clearInterval(timerId)
   } else 
      document.getElementById("counter").textContent = counter - 1;
}, 1000);

clearInterval

clearInterval(action,interval) regelt oder cancelt eine Funktion, die wiederholt mit einer Verzögerung aufgeweckt wird.

setInterval mit Parametern

Wenn die aufgerufene Funktion selber Parameter hat, könnten die Parameter auch in setInterval übergeben werden. Diese Möglichkeit gab es immer schon, wurde aber von Internet Explorer bis einschl. IE9 nicht unterstützt und geriet in Vergessenheit. Ab IE 10 kann setInterval mit Parametern aufgerufen werden.

timer = setInterval ( 'elem.style.display="block";', 10 );
timer = setInterval ( slideshow, 5000 )
timer = setInterval (function() { … }, 1000 );
timer = setInterval (function() { funcA (opt, opt); }, 3000 );
var monsters = document.querySelectorAll ('.monster');
var numMonsters = monsters.length;
var left = [0, -40, -80];

for (var i=0; i<numMonsters; i++) {
  moveMonster (monsters[i], left[i]);
}

function moveMonster (obj,j) {
   var repeater = setInterval (function () {
      j += 1;
      obj.setAttribute ('style','left: ' + j + 'px');
      if (j>width) {
         clearInterval(repeater);
         obj.setAttribute ('style','left: 0px');
      }
   },10);
}

Die Funktion könnte mitsamt Parametern in Hochkommas an setInterval übergeben werden. Dann wird die Funktion – auf gleiche Weise wie eine einzelne Anweisung – evaluiert.

var reference = setInterval("slideshow(opt1,opt2)",500);

Das gilt als ausgesprochen unschicklich und unsicher (genauso wie eval).

Easing

Erst Easing – Beschleunigen und langsames Auslaufen von Bewegungen kommt ein natürlicher Bewegungsablauf zustande. Easing hat Animationen mit Flash so elegant gemacht, Animationen mit jQuery liefern Easing ebenfalls mit und CSS macht es mit transition und keyframes. Aber in Javascript fehlt Easing – Beschleunigen und langsames Auslaufen von Bewegungen.

Die meisten Javascript-Animationen verändern CSS-Eigenschaften – CSS transition und Keyframe-Animationen bringen Easing-Optionen mit.

Wenn Easing-Funktionen wie easeIn, easeInOut oder easeInOutQuart nicht via CSS oder jQuery eingebracht werden, gibt es eine Portierung des Urvaters der Easing-Funktionen (Robert Penner) von Kirupa Chinnathambi.

easeIn(currentIteration, begin, change, duration);

change = finish - begin

CSS transition statt Javascript

Die Kombination aus CSS3 transition, CSS Keyframe-Animationen und Javascript vereinfacht heute Animationen und macht komplexe Abläufe möglich. Neue Javascript Methoden wie classList triggern Aktionen, denn CSS hat nur wenige Events, die eine Animation auslösen.

Der Ruf, dass reine CSS Animationen und Transformationen performanter als Javascript wären, rührt aus jQuery-Animationen: jQuery war nicht für Animationen gedacht.

setInterval ANIMATION setTimeout (bei einem rekursiven Aufruf) setInterval 1000 1000 1000 2000 3000 func(1) func(2) func(3) func(1) func(2) func(3)