Erreiche eine etwas stabile Framerate mit requestAnimationFrame?

Question

Ich spiele mit der requestAnimationFrame herum, aber ich bekomme sehr ruckartige Animationen in jedem anderen Browser als Chrome.

Ich erstelle ein Objekt wie folgt aus:

var object = function() { 

    var lastrender = (new Date()).getTime(); 
    var delta = 0; 

    return { 

     update: function() { 
      //do updates using delta value in calculations. 
     }, 

     loop: function() { 
      var looptimestamp = (new Date()).getTime(); 
      delta = looptimestamp - lastrender; 
      lastrender = looptimestamp; 

      this.update(); 

      window.requestAnimationFrame(this.loop.bind(this)); 
     } 
    }; 
} 

Gerade jetzt ich gerade Zeichnung ein einzelnes Rechteck auf einem Canvas-Element und es bewegen. 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. Allerdings, wenn ich das gleiche in Firefox oder Safari bekomme ich folgende Delta-Werte:

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on 

Es sieht aus, als ob der Browser mit dem Display ist nicht sehr schön synchronisiert werden, und in allen anderen Fällen als Chrome, würde man Erhalten Sie sanftere Animationen mit der alten setTimeout-Methode mit 16ms als Ziel-Timeout.

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 zu erhalten als die oben in Firefox geposteten?

Answer 1

Sie könnten flüssigere Animation, wenn man Updates überspringen, wenn Delta < Schwelle, zum Beispiel:

if (delta > 5) this.update(); 

Answer 2

Der Grund für die glatte Framerate der Animation wegen des Speichers Ihres Browsers in Bezug auf die abnimmt, Segeltuch. 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 der Framerate-Drop ist wegen des Speichers von dem Canvas-Element belegt. 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 die Zeichenfläche 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 beginnen. Zum Beispiel:

// function that draws you content or animation 
function draw(){ 
    // start a new path/empty canvas path 
    canvas.beginPath(); 

    // actual drawing of content or animation here 
}