JavaScript Animationen

[Roadster]

Aloha ;)

Hallo RIDER :)

Bin tatsächlich positiv geflasht von den Möglichkeiten. Habe mich nach deinem Posting auch mal eingelesen, hier ein nützlicher Link:

http://creativejs.com/resources/requestanimationframe/

Danke für den Tip! Interessante Lektüre ist immer willkommen! ;)

Allerdings muss ich dir ein klein wenig widersprechen. Das ist nicht soweit von CSS-Animationen entfernt wie du vielleicht denkst. Vielmehr ist es so, wie ich jetzt herausgelesen habe, dass requestAnimationFrame Zugriff auf dieselben nativen Methoden erhält, die auch von CSS-Animationen genutzt werden.

Wenn man erstmal eine Weile mit setInterval() /* oder */ setTimeout() an einem Ladebalken herumgewurschtelt hat und dann das Ganze mit requestAnimationFrame() durchlaufen lässt, erscheinen selbst die Erinnerungen an frühere CSS-Varianten holzschnittartig... :)

Browsersupport sieht auch ganz gut aus, aber: für öffentlich zugängliche Projekte muss vorerst auf jeden Fall z.B. auf das unter dem Link ganz oben genannte Polyfill gesetzt werden (welches ja für fehlende Unterstützung auf setTimeout setzt), da IE9 keine Unterstützung bietet. IE9 ist aber noch bedeutsam, da es keine aktuellere IE-Version für Windows Vista gibt und der offizielle Support für Vista noch nicht eingestellt ist.

Leute, die Windows Vista auf ihrem Rechner laufen haben verdienen es ohnehin nicht, berücksichtigt zu werden. ;)

Die Notwendigkeit, setTimeout einzusetzen, bleibt aber imho, wie der Artikel zeigt, dennoch - denn requestAnimationFrame ist nicht in der Lage, die Geschwindigkeit der Animation zu kontrollieren. Und damit bleibt für ease-Effekte auch die Notwendigkeit, komplizierte Funktionen einzusetzen, um die aktuelle Laufgeschwindigkeit anhand der gewünschten Laufdauer zu ermitteln.

var body = document.getElementsByTagName( "BODY" )[ 0 ];  
  
fade( body, "fadeIn", 2 );

Die "2" steht für 2 Sekunden, zumindest annäherungsweise, könnten auch 1 oder 5 sein...

function fade( element, mode, duration ) {  
  
  var requestAnimationFrame = window.requestAnimationFrame ||  
                              window.mozRequestAnimationFrame ||  
                              window.webkitRequestAnimationFrame ||  
                              window.msRequestAnimationFrame;  
  
  var d = duration * 60;  
  
  var iteration = 0;  
  
  var t;  
  
  
  if ( mode === "fadeIn" ) {  
  
    fadeIn();  
  
  }  
  
  
  function fadeIn() {  
  
    t = easeIn( iteration, 0, 100, d );  
  
    iteration++;  
  
    var opacity = t / 100;  
  
    element.style.opacity = opacity + "";  
  
    if ( opacity <= 100 ) {  
  
      requestAnimationFrame( fadeIn );  
  
    }  
  
    else {  
  
      element.style.opacity = "1";  
  
    }  
  
  }  
  
  function easeIn( c, s, l, t ) {  
  
    return l * Math.pow( c / t, 3 ) + s;  
  
  }  
  
}

;)

Gruß,

Roadster.