requestAnimationFrame

[Hendoul]

Hi

Ich bin gerade dabei mich ein bisschen vertraut zu machen mit Canvas und Animation. Dabei bin ich in einem Tutorial auf die Funktion 'requestAnimationFrame' gestossen.

Sowie ich das verstanden habe wird hier abhängig von der Frequenz des Monitors die Animation angezeigt. Bei einem 60Hz Monitor also so ca. alle 16ms.

Hier mal meine Spielwiese.
https://jsfiddle.net/GarfieldKlon/n05heopf/

Ich habe mich jetzt einfach gefragt, was passiert wenn die Berechnungen der Animation länger als die 16ms dauert? Dazu habe ich dann testweise mal einen zeitaufwendigen for-loop eingebaut und es begann zu stocken. Eigentlich auch das was ich erwartet habe.

Code-Schnippsel:

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    for (let i = 0; i < circles.length; i++) {
        circles[i].update();
    }
}

animate();

Verstehe ich es denn richtig, dass hier alles ca. 16ms das canvas gecleared wird und die Schleife in meinem Fall 100mal durchloffen wird um die Animation zu bewerkstelligen? Und das muss zwingend in den 16ms geschehen, da sonst nicht mehr flüssig?

 

[Teiby]

ja