Canvas Animation

Question

Je crée un script graphique à l'aide de canvas, j'ajoute de l'animation à un graphique mais je n'aime pas la façon dont ça ressemble, j'utilise setInterval pour la fonction X ajoutant la hauteur à un rectangle pour faire une barre graphique par exemple, mais je veux une animation plus fluide, est une autre façon de faire une animation?

Answer 1

Je suppose que vous avez des rectangles de hauteur initiale 0, et vous augmentez la hauteur par intervalle jusqu'à ce que vous atteigniez un point de consigne ... et que vous souhaitiez rendre l'animation "plus lisse"?

Pour le rendre plus fluide, vous baissez juste le 2ème paramètre de setInterval [retard] de sorte que le premier paramètre [fonction à appeler] est appelé plus ...

En outre, vous pouvez ajouter une interpolation avec un ralentissement à la fin en utilisant la formule
rect.h = (rect.h*N+targetHeight)/(N+1) ... où N> 1 ...
Alors qu'au début, la barre se développe beaucoup et ralentit finalement la croissance à la hauteur cible.

Answer 2

non non non. Il y a trois façons de créer une animation avec JS:

1. setTimeout()
2. setInterval()
3. requestAnimationFrame

des options 1 et 2 sont des moyens de la vieille école de la création d'animations . L'option # 3 est une nouvelle spécification et donne les animations les plus fluides car le navigateur lui-même contrôle dynamiquement le FPS. Voici un shim génial créé par Paul Irish qui crée un wrapper requestAnimFrame pour gérer toutes les implémentations de navigateur:

// shim layer with setTimeout fallback 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(/* function */ callback, /* DOMElement */ element){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 


// usage: 
// instead of setInterval(render, 16) .... 

(function animloop(){ 
    render(); 
    requestAnimFrame(animloop, element); 
})();