Javascript ne Peux pas Régler le taux de rafraîchissement - requestanimationframe

Je commence la boucle

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);
                    };

Je ne peux pas régler le taux de rafraîchissement. Il est toujours très rapide. Pourquoi je ne peux pas le changer à 1 image par seconde. Je veux faire cela juste pour des fins de test.
Dois-je effacer la zone à chaque fois? Il semble de bon travail sans compensation.

Grâce.

Voici un lien vers un violon pour le code complet:
code complet

Grâce

OriginalL'auteur Lumo5 | 2013-09-25

8

rAF est verrouillé pour contrôler la synchronisation, généralement 60 Hz, donc on ne peut pas régler le FPS pour les il en lui-même (navigateur peut réduire les FPS lors de l'onglet est inactif ou sur piles).

Aussi, ce que vous voulez changer, c'est la solution de repli pour les poly-remplir, c'est: si le rAF n'est pas pris en charge dans le navigateur, il va plutôt utiliser setTimeout. Cependant, la plupart des navigateurs de nos jours ne soutien de la rAF (un préfixe) de sorte que le setTimeout ne sera jamais utilisé.

Vous pouvez faire deux choses:
- Remplacer la rAF dans votre boucle à l'aide de setTimeout directement (lors de l'essai)
Exemple:
```
var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}
```
- Gaz de la rAF à l'aide d'un compteur:
Exemple:
```
var framesToSkip = 60,
    counter = 0;

function loop() {

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

    ///do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}
```
MODIFIÉ VIOLON ICI

Il y a probablement de meilleures façons de mettre en œuvre la limitation, mais je suis en train de le montrer le principe de base. Cela continue à fonctionner à pleine vitesse, 60 FPS, mais votre code minimal des opérations et uniquement lorsque le compteur a atteint son nombre d'exécuter le code principal.

Vous n'avez pas besoin d'effacer la zone à chaque fois si ce que vous dessinez prochaine couvrira auparavant établi contenu, ou si vous voulez le garder, bien sûr. Vous pouvez également effacer une partie d'optimiser davantage, si nécessaire.

OriginalL'auteur
6

Un peu en retard à la fête, mais voici comment obtenir le bénéfice de la RAF, tout en les contrôlant images/seconde.

Remarque: requestAnimationFrame a maintenant une meilleure façon de faire les choses qu'en utilisant le modèle de code dans mon premier 3 ans original de réponse ... voir ma mise à jour ci-dessous pour les nouveaux et améliorés.

[Mise à jour: requestAnimationFrame a maintenant une meilleure façon de limitation]

La nouvelle version de requestAnimationFrame maintenant envoie automatiquement dans un timestamp actuel que vous pouvez utiliser pour limiter votre code d'exécution.

Voici un exemple de code pour l'exécution de votre code chaque 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);
}
```
}

Cela semble très logique et intelligent.
ne devriez-vous pas de swap setTimeout et requestAnimationFrame en quelque sorte? Dans votre exemple, mettre à jour et de tirage sont appelés à la setTimeout événement, encore asynchrone alors que le gameloop() le corps est en synchro (mais rien n'empêche de définir le délai d'expiration)
Ce code est un couple ans et maintenant requestAnimationFrame envoie automatiquement dans un horodatage de sorte que le setTimeout n'est plus nécessaire. Utiliser le timestamp de gaz de l'animation.
Sûr, mais ton code est faux de toute façon. C'était en 2013 et il est maintenant.
Eh bien, ce code n'est pas "mauvais" et il ne fonctionne en effet...il vient d'être remplacé par de meilleures capacités. J'ai mis à jour ma réponse afin de refléter les nouvelles fonctionnalités 🙂

OriginalL'auteur markE
2

Vous devriez regarder cet article qui donne un bon traitement du sujet.
http://creativejs.com/resources/requestanimationframe/
```
var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimFrame(draw);
        //Drawing code goes here
    }, 1000 / fps);
}
```
Voici le code je pense que vous voulez, mais dans l'article original, il a dit utilisés requestAnimationFrame, mais ici, je suis en utilisant requestAnimFrame. Je pense que peut-être il a changé et que vous êtes supposé utiliser requestAnimFrame maintenant. requestAnimationFrame n'a pas fonctionné pour moi pendant que requestAnimFrame fait.

OriginalL'auteur Steven2163712
1

La façon dont les navigateurs et javascript travail rend difficile à mettre en place un cadre fixe le taux. Dites que vous voulez faire quelque chose de chaque une seconde, comme la mise à jour et le dessin. Une façon de le faire pourrait être d'appeler window.setTimeout() avec un paramètre d'une seconde. Mais le problème, c'est que ce n'est pas fiable, même si vous configurez un rappel chaque seconde que vous ne pouvez pas être sûr que tous les rappels seront dans les temps. Une haute charge du processeur, par exemple, pourrait faire les rappels arriver beaucoup plus tard que ce qu'ils devraient. Et même si les rappels serait à l'heure, vous n'avez aucun contrôle de la date de l'affichage à l'écran qui va arriver.

Une meilleure façon de gérer cela est d'accepter le fait que vous ne pouvez pas obtenir un très moment précis de vos appels, et au lieu de cela, chaque fois que vous recevez un appel, vous de calculer combien de temps a passé et d'agir en fonction de cela. Cela signifie que vous allez laisser le système détermine le taux d'armature, et vous venez juste de prendre soin de la mise à jour de votre animation ou du jeu en fonction de combien de temps qui a passé.

requestAnimationFrame est une nouvelle fonctionnalité prise en charge par la plupart des navigateurs, maintenant, qui est particulièrement utile pour les jeux. Elle sera appelée à chaque fois que le navigateur est prêt à tirer, ce qui est bon. Alors, vous saurez que les mises à jour et le dessin que vous faites va se passer juste avant que l'image actuelle est représenté à l'écran.

Voici un exemple sur comment vous pouvez mettre à jour votre gameLoop de prendre le temps de la différence en compte.
```
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);
}
```
OriginalL'auteur Michael Brennan
0

C'est comment requestAnimationFrame œuvres. Si vous le souhaitez framerate, utilisez setTimeout seulement.

Habituellement, vous devez prendre un paramètre, qui est à l'heure actuelle. La comparer à la dernière image est temps de savoir dans quelle mesure le long de l'animation doit se déplacer.

OriginalL'auteur Niet the Dark Absol
0

Très pratique bibliothèque js si vous avez besoin de contrôle de Framrate en javascript
https://github.com/aaronGoshine/Javascript-OnEnterFrame-Event-Manager/blob/master/index.html

OriginalL'auteur Aaron Goshine
0

requestAnimationFrame va fonctionner avec le maximum réalisable cadence (jusqu'à 60 fps). C'est parce qu'il vous donnera toujours la prochaine image d'animation.

Le paramètre ajusté est seulement pour le polyfill, qui sera active que si votre navigateur n'a pas de mise en œuvre de requestAnimationFrame.

Si vous voulez essayer la peinture à la seconde pour des fins de test, essayez setInterval à la place.

OriginalL'auteur David

Vous devez vous connecter pour publier un commentaire.