»`requestAnimationFrame`« in JavaScript

Verwendung von »`requestAnimationFrame`«

Der Bildschirm eines Anzeigegerätes wird grundsätzlich nur mit einer bestimmten Frequenz aufgefrischt, so daß es Zeitverschwendung wäre, die Anzeige häufiger zu aktualisieren.

Due Funktion »window.requestAnimationFrame« ruft die ihr übergebene Funktion vor der nächsten Auffrischung auf. Wenn dann dabei erneut »window.requestAnimationFrame« aufgerufen wird, so erfolgt der nächste Aufruf der übergebenen Funktion erst nach der nächsten Auffrischung.

Das folgende Beispieldokument zeigt die Implementation eines Zählers, der bei jeder Auffrischung hochgezählt wird.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
#Wert { font-size: 20vw; line-height: 45vh }
p { text-align: center }
</style></head><body>
<p><span id="Wert">0</span></p>
<pre><code><script>/*<![CDATA[*/
f = () =>
{ wert.innerHTML = +wert.innerHTML + 1;
  window.requestAnimationFrame( f ); }
wert = document.getElementById( "Wert" );
f();
/*]]>*/</script></code></pre></body></html>

Ein weiteres Beispiel mit einer Leinwand

Es folgt ein einfaches kleines Beispiel, dessen Details hier aber noch nicht vollständig beschrieben werden. (Dieser Abschnitt ist noch relativ neu und soll später weiter ausformuliert werden.)

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<canvas id='myCanvas' width=800 height=600></canvas>
<pre><code><script>/*<![CDATA[*/
animate = ()=>
{ painter.clearRect( 0, 0, canvas.width, canvas.height );
  painter.fillRect( 400 + 200 * Math.sin( phi ), 300 + 150 * Math.cos( phi ), 5, 5 );
  phi += 0.005;
  window.requestAnimationFrame( animate ); }
const canvas = document.getElementById( 'myCanvas' );
const painter = canvas.getContext( '2d' );
let phi = 0;
painter.fillstyle='white';
animate();
/*]]>*/</script></code></pre></body></html>

Die Web-Animations-API

Die neue experimentelle Web-Animations-API bietet weitere Möglichkeiten zur Animation.

URI

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

»requestAnimationFrame« in JavaScript

Verwendung von »requestAnimationFrame«

Ein weiteres Beispiel mit einer Leinwand

Die Web-Animations-API

»`requestAnimationFrame`« in JavaScript

Verwendung von »`requestAnimationFrame`«