Ich spiele mit dem requestAnimationFrame herum, aber ich bekomme sehr ruckelnde Animationen in jedem anderen Browser als Chrome.
Ich erstelle ein Objekt wie dieses:
%Vor%Im Moment zeichne ich nur ein einzelnes Rechteck auf ein Leinwandelement und bewege es umher. Es ist eine sehr leichte Operation auf dem Prozessor. Dies läuft in Chrome ziemlich flüssig, und wenn ich den Delta-Wert der Konsole protokolliere, ist er ungefähr gleich ~ 17. Wenn ich das gleiche in Firefox oder Safari mache, bekomme ich die folgenden Delta-Werte:
%Vor%Es sieht so aus, als würde der Browser nicht sehr gut mit dem Display synchronisieren, und in allen anderen Fällen als Chrome würde man glattere Animationen mit der alten setTimeout-Methode mit 16ms als Ziel-Timeout bekommen.
Weiß jemand, ob es möglich ist, glattere Animationen mit requestAnimationFrame in anderen Browsern als Chrome zu erhalten? Hat es jemand geschafft, stabilere Delta-Werte als die oben in Firefox geposteten zu erreichen?
Der Grund für die Verringerung der glatten Framerate Ihrer Animation liegt in der Speicherkapazität Ihres Browsers in Bezug auf die Arbeitsfläche. Ich kenne die wirklichen Details der Leistung in Browsern nicht, aber Firefox hat fast sofort eine Framerate fallen und in Chrome der Rückgang tritt einige Zeit später.
Das eigentliche Problem des Framerate-Drop ist der vom canvas-Element belegte Speicher. Jedes Mal, wenn Sie etwas auf die Leinwand zeichnen, wird diese Operation im Pfad der Leinwand gespeichert. Dieser Pfad belegt jedes Mal mehr Speicher, wenn Sie etwas auf der Zeichenfläche zeichnen. Wenn Sie den Pfad der Arbeitsfläche nicht leeren, wird die Bildrate reduziert. Der Canvas-Pfad kann nicht geleert werden, indem der Canvas-Bereich mit context.clearRect(x, y, w, h); gelöscht wird. Stattdessen müssen Sie den Canvas-Pfad zurücksetzen, indem Sie einen neuen Pfad mit context.beginPath(); beginnen. Zum Beispiel:
Sie könnten eine glattere Animation erhalten, wenn Sie Aktualisierungen überspringen, wenn delta & lt; Schwelle, zum Beispiel:
%Vor%Tags und Links javascript animation performance requestanimationframe