Synchronisation du temps de sommeil de l'animation JavaScript

Question

Je sais qu'il existe beaucoup de bons paquets JS qui incluent des bibliothèques d'animation, mais il y a une animation simple que j'écris et qui fait glisser un DIV autour d'une page. Besoin de tout Jquery pour cela semble être exagéré. L'animation est super, et maintenant je veux juste l'accorder pour qu'elle se déplace le plus facilement possible. Dites que je veux que le DIV déplace X pixels en N secondes. Je peux ajuster le temps de sommeil entre la boucle d'animation et la distance parcourue par la DIV dans chaque boucle. Quelles sont les bonnes règles à suivre pour affiner l'animation afin qu'elle soit fluide sur la plupart des navigateurs/ordinateurs? Existe-t-il de bons moyens de profiler l'utilisateur actuel et de régler les paramètres de l'animation à la volée?

Merci!

Answer 1

Si vous connaissez la vitesse (en pixels par milliseconde) que vous souhaitez utiliser pour l'animation, vous pouvez enregistrer l'heure actuelle (new Date()) dans chaque tick d'animation, puis vérifier le temps écoulé depuis la coche précédente et multiplier que par la vitesse pour obtenir le nombre de pixels à déplacer.