JavaScript/Canvas/Animation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

HTML5 Canvas eignet sich besonders gut für die Animation von beweglichen Objekten. Allerdings kann eine mit canvas gezeichnete Grafik nicht bewegt oder verändert werden. Dafür muss bei jedem Einzelschritt die aktuelle Grafik gelöscht und dann neu gezeichnet werden. Da es erst bei einer Bildwechselfrequenz von über 20 Bildern pro Sekunde zu ruckelfreien Darstellungen kommt (Fernsehen und Computerspiele haben sogar eine Bildfrequenz von 50-60Hz), kommt hier dem Prozessor des Computers eine entscheidende Rolle zu.

Für die Animation von Scripten stehen folgende Methoden zur Verfügung:

  • setTimeout: führt eine Funktion nach einer Verzögerung (Timoeout) aus.
  • setInterval: setzt ein Intervall, das eine Funktion immer wieder ausführt.
  • requestAnimationFrame: bittet den Browser eine Animation immer wieder auszuführen

Gegenüber den beiden oberen Methoden hat die requestAnimationFrame-Methode des window-Objekts einige Vorteile:

Bei einem Aufruf von requestAnimationFrame wird als Parameter die zu animierende Funktion übergeben. Dabei werden alle Einzelschritte immer wieder neu gezeichnet und dann durch den neuen Frame überschrieben. Der Browser signalisiert, wann der nächste Schritt gezeichnet werden soll und kann dabei auf hardwarebeschleunigte Routinen zurückgreifen sowie das Rendern anderer Objekte mit der Animation koordinieren. In inaktiven Tabs wird die Animation verlangsamt bzw. unterbrochen, was Prozessorleistung und damit auch Strom spart und sich damit bei mobilen Geräten positiv auf die Laufzeit auswirkt.

Anwendungsbeispiele[Bearbeiten]

Beispiel ansehen …
  function animate() {

    requestAnimationFrame(animate);

    x += speed;
    if(x <= 0 || x >= 475){
        speed = -speed;
	// y = y + 10; so könnte das Objekt am Ende einer Zeile eine Zeile nach unten gehen
    }

    draw();
  }

  function draw() {
    var canvas  = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.clearRect(0, 0, 500, 300);
    context.fillStyle = '#dfac20';
    context.fillRect(x, y, 20, 20);
    context.lineWidth = 3;
    context.strokeStyle = '#3983ab';
    context.strokeRect(x, y, 20, 20);	
  }
In diesem Beispiel wird ... .

Ausblick[Bearbeiten]

Die oben aufgeführten Beispiele zeigen nur den prinizpiellen Aufbau von Animationen. Häufig werden aber nicht nur lineare Bewegungen animiert, sondern auch komplexere Abläufe, die…

  • Einflüsse der Schwerkraft beim Werfen und Fallen
  • Kollisionserkennung
  • Lichtverhältnisse mit Beleuchtung und Schatten

berücksichtigen.

All dies kann mit JavaScript-Scripten berechnet werden, für räumliche Animationen gibt es mit WebGL eine aufregende Alternative.

siehe auch:



Weblinks[Bearbeiten]

Tutorials:


Demos: