RequestAnimationFrame - dois-je utiliser le paramètre DOMHighResTimeStamp?

Question

J'ai essayé de rechercher comment utiliser requestAnimationFrame et j'ai fini par être très confus.

Selon Mozilla, si vous avez une fonction d'animation appelée « étape » que vous appelez avec requestAnimationFrame(step), step accepte un argument qui est un certain nombre de millisecondes, un argument DOMHighResTimeStamp.

Et pourtant chaque exemple que j'ai vu en ligne sur comment utiliser requestAnimationFrame n'utilise pas cet argument. Certains exemples insistent sur le fait que vous pouvez supposer que la fonction step s'exécutera 60 fois par seconde, et donc n'utilisera aucun des concepts time. D'autres ont leur propre "nombre de millisecondes" séparé de l'argument, en utilisant new Date(); - Je suppose qu'il est assez facile de modifier ces exemples pour utiliser l'argument à la place.

Est-il acceptable de supposer que la fonction fonctionnera 60 fois par seconde? Cela semble ... imprudent pour moi. Mozilla dit "Le nombre de rappels est habituellement 60 fois par seconde, mais correspondra généralement au taux de rafraîchissement de l'affichage dans la plupart des navigateurs Web selon la recommandation W3C", qui ne me rend pas confortable avec cette hypothèse. Y at-il une raison pour laquelle les gens utilisent leur propre moyen d'obtenir millisecondes plutôt que d'utiliser l'argument?

Answer 1

Eh bien, il y avait d'autres réponses et commentaires avant mais pour une raison quelconque, les gens les ont supprimés. J'ai fini par trouver comment utiliser l'horodatage appropriée et affiché une réponse here

Je vais copier la réponse sur: Je pense que

---

J'ai trouvé une réponse pour vous. Il est basé sur this library

D'abord, je voudrais juste saisir une fonction de ce site

function inOutQuad(n){ 
    n *= 2; 
    if (n < 1) return 0.5 * n * n; 
    return - 0.5 * (--n * (n - 2) - 1); 
}; 

Ensuite, j'utiliser une forme modifiée du code d'exemple, quelque chose comme ça

function startAnimation(domEl){ 
    var stop = false; 

    // animating x (margin-left) from 20 to 300, for example 
    var startx = 20; 
    var destx = 300; 
    var duration = 1000; 
    var start = null; 
    var end = null; 

    function startAnim(timeStamp) { 
     start = timeStamp; 
     end = start + duration; 
     draw(timeStamp); 
    } 

    function draw(now) { 
     if (stop) return; 
     if (now - start >= duration) stop = true; 
     var p = (now - start)/duration; 
     val = inOutQuad(p); 
     var x = startx + (destx - startx) * val; 
     $(domEl).css('margin-left', `${x}px`); 
     requestAnimationFrame(draw); 
    } 

    requestAnimationFrame(startAnim); 
} 

I pourrait changer comment 'stop' est calculé, je pourrais écrire quelque chose pour s'assurer qu'il se termine sur destx, etc, mais c'est le format de base

Je le montre en

Je suis vraiment fier de celui-ci. J'ai voulu comprendre cela pendant un moment. Content d'avoir eu une raison de le faire.