Javascript - Können nicht Einstellen, FrameRate - requestanimationframe

Starte ich die Schleife

function gameLoop(){
   update();
   draw();
   requestAnimFrame(gameLoop);
}

var requestAnimFrame =  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 1);
                    };
  1. Kann ich nicht einstellen, die frame-rate. Es ist immer sehr schnell. Warum kann ich nicht ändern es auf 1 frame die Sekunde. Ich will dies tun, nur für Testzwecke.
  2. Muss ich deaktivieren Sie die Leinwand jedes mal? Es scheint zu funktionieren gut, ohne es deaktivieren.

Dank.

Hier ist ein link zu einer Geige für den vollständigen code:
vollständige code

Dank

InformationsquelleAutor Lumo5 | 2013-09-25
  1. 8

    rAF ist gesperrt monitor sync, in der Regel 60 Hz, so können wir nicht einstellen, die FPS für es in sich (browser möglicherweise reduzieren FPS wenn der tab inaktiv ist oder auf Batterien).

    Auch, was Sie versuchen, zu ändern, ist der fallback für den poly-fill; das ist: wenn rAF nicht unterstützt wird im browser stattdessen setTimeout. Jedoch, die meisten Browser heutzutage tun Unterstützung rAF (auch un-Präfix), so dass die setTimeout nie verwendet werden.

    Können Sie zwei Dinge tun:

    • Ersetzen rAF in Ihrer Schleife durch die Verwendung setTimeout direkt (beim testen)

    Beispiel:

    var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}
    • Gas rAF, indem mit einem Zähler:

    Beispiel:

    var framesToSkip = 60,
    counter = 0;

function loop() {

    if (counter < framesToSkip) {
        counter++;
        requestAnimationFrame(loop);
        return;
    }

    ///do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}

    GEÄNDERT FIDDLE HIER

    Gibt es wahrscheinlich bessere Wege zur Umsetzung Drosselung, aber ich bin versucht, nur zeigt das grundlegende Prinzip. Dies wird noch auf vollen Touren laufen, 60 FPS, aber dein code wird minimal von Operationen und nur, wenn der Zähler erreicht hat, bei der Anzahl wird es führen Sie die Haupt-code.

    Müssen Sie nicht deaktivieren Sie die Leinwand, jedes mal, wenn das, was Sie zeichnen, wird der nächste Abdeckung die zuvor erstellten Inhalte, oder wenn Sie wollen, halten Sie es natürlich. Sie können auch löschen Sie einen Teil weiter zu optimieren, falls erforderlich.

    InformationsquelleAutor
  2. 6

    Etwas spät zur party, aber hier ist, wie man den nutzen von RAF, während auch die Steuerung frames/Sekunde.

    Hinweis: requestAnimationFrame hat jetzt einen besseren Weg, Dinge zu tun, als mit dem code-Muster in meinem ursprünglichen 3 Jahre alte original Antwort ... siehe mein update unten für die neuen und verbesserten Weg.

    [Update: requestAnimationFrame hat jetzt einen besseren Weg der Drosselung]

    Die neue version von requestAnimationFrame jetzt sendet automatisch in einen aktuellen Zeitstempel, die Sie verwenden können, um die Drosselklappe Ihre Codes.

    Hier ist der Beispiel-code ausführen der code alle 1000ms:

    var nextTime=0;
var delay=1000;

function gameLoop(currentTime){
    if(currentTime<nextTime){requestAnimationFrame(gameLoop); return;}
    nextTime=currentTime+delay;
    //do stuff every 1000ms
    requestAnimationFrame(looper);
}

    }

    • Klingt sehr logisch und clever.
    • sollten Sie nicht tauschen setTimeout und requestAnimationFrame irgendwie? In deinem Beispiel -, update-und draw sind aufgerufen, mit der setTimeout-Ereignis, immer noch async, während die gameloop() Körper in sync (tut aber nichts, als das timeout)
    • Dieser code ist ein paar Jahre alt und jetzt requestAnimationFrame sendet automatisch in ein timestamp, also die setTimeout ist nicht mehr erforderlich. Anhand des Zeitstempels der Drosselklappe die animation.
    • Sicher, aber dein code ist sowieso falsch. Es war im Jahr 2013 und es ist jetzt.
    • Gut, dieser code ist nicht "falsch" und es funktioniert in der Tat...es wurde nur abgelöst durch bessere Fähigkeiten. Ich habe aktualisiert, meine Antwort entsprechend den neuen Möglichkeiten 🙂
    InformationsquelleAutor markE
  3. 2

    Sollte man an diesem Artikel sehen, das gibt eine ordentliche Behandlung des Themas.
    http://creativejs.com/resources/requestanimationframe/

    var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimFrame(draw);
        //Drawing code goes here
    }, 1000 / fps);
}

    Hier ist der code ich denke, Sie wollen, aber im ursprünglichen Artikel hieß es requestAnimationFrame verwendet, aber hier bin ich mit requestAnimFrame. Ich denke, vielleicht ist es geändert und man soll requestAnimFrame jetzt. requestAnimationFrame nicht für mich arbeiten, während requestAnimFrame haben.

    InformationsquelleAutor Steven2163712
  4. 1

    Den Weg Browsern und javascript arbeiten, macht es schwierig, eine Feste frame-rate. Sagen Sie, Sie wollen etwas tun, jeder zweite, wie die Aktualisierung und Zeichnung. Ein Weg könnte sein, rufen Sie window.setTimeout() mit einer Einstellung von einer Sekunde. Aber das problem ist, dass dies nicht zuverlässig, auch wenn Sie konfigurieren einen Rückruf jede Sekunde, die Sie können nicht sicher sein, dass alle Rückrufe werden in der Zeit. Eine hohe Prozessor-Last, zum Beispiel, könnte die Rückrufe kommen sehr viel später als Sie sollte. Und auch wenn die Rückrufe wäre an der Zeit, Sie haben keine Kontrolle über, wenn die eigentliche Zeichnung auf dem Bildschirm passieren wird.

    Einen besseren Umgang damit zu finden ist, die Tatsache zu akzeptieren, dass Sie nicht bekommen kann eine sehr genaue timing-rufe, und statt dessen immer, wenn Sie einen Anruf erhalten, berechnen Sie, wie viel Zeit vergangen ist, und handeln entsprechend. Dies bedeutet, dass Sie lassen Sie das system entscheiden, das die frame-rate, und Sie kümmern sich um die Aktualisierung Ihrer animation oder Spiel, je nachdem, wie viel Zeit ist vergangen.

    requestAnimationFrame ist eine neuere Funktionen von den meisten Browsern unterstützt durch nun, das ist besonders nützlich für Spiele. Es wird jedesmal aufgerufen, wenn der browser bereit ist zu ziehen, das ist gut. Dann werden Sie wissen, dass die updates und zeichnen Sie tun, passieren wird unmittelbar vor dem aktuellen frame auf den Bildschirm gezeichnet.

    Hier ist ein Beispiel, wie Sie aktualisieren Sie Ihre gameLoop die Zeit zu nehmen, den Unterschied zu berücksichtigen.

    var lastTimestamp = +new Date;

function gameLoop(timestamp) {
  var now = +new Date;
  var dt = now - lastTimestamp;

  //dt is the amount of time in ms that has passed since last call.
  //update takes this time difference (in seconds) and can then perform its
  //updates based on time passed.
  update(dt / 1000);
  draw();
  lastTimestamp = now;
  requestAnimationFrame(gameLoop);
}
    InformationsquelleAutor Michael Brennan
  5. 0

    So requestAnimationFrame funktioniert. Wenn Sie möchten, dass eine bestimmte framerate, verwenden Sie setTimeout nur.

    In der Regel würden Sie ein parameter, der die aktuelle Uhrzeit an. Vergleichen Sie es mit dem letzten Bild ist an der Zeit, um herauszufinden, wie weit die animation bewegen soll.

    InformationsquelleAutor Niet the Dark Absol
  6. 0

    Ganz praktisch, js library, wenn Sie die Kontrolle über Framrate in javascript
    https://github.com/aaronGoshine/Javascript-OnEnterFrame-Event-Manager/blob/master/index.html

    InformationsquelleAutor Aaron Goshine
  7. 0

    requestAnimationFrame wird mit der maximal erreichbaren Bildrate (bis zu 60 fps). Dies ist, weil es immer geben, Sie die nächste animation frame.

    Des Parameters, den Sie eingestellt ist nur für die polyfill, die aktiv werden, wenn Ihr browser hat keine Implementierung von requestAnimationFrame.

    Wenn Sie möchten, um zu versuchen Malerei eine Sekunde zu Testzwecken versuchen setInterval statt.

    InformationsquelleAutor David
Schreibe einen Kommentar