animation - 画布动画

Question

我正在使用画布制作图形脚本，正在向图表添加动画，但我不喜欢它的外观，例如，我使用 setInterval for X 函数向矩形添加高度以制作条形图，但是我想要一个更流畅的动画，是另一种制作动画的方法吗？

Answer 1

不不不。用JS创建动画的三种方式：

1. 设置超时（）
2. 设置间隔（）
3. requestAnimationFrame

选项 #1 和 #2 是创建动画的老式方法。选项 #3 是一个较新的规范，并产生最流畅的动画，因为浏览器本身正在动态控制 FPS。这是 Paul Irish 创建的一个很棒的 shim，它创建了一个 requestAnimFrame 包装器来处理所有浏览器实现：

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

Answer 2

我假设您有初始高度为 0 的矩形，并且您正在增加每个间隔的高度，直到达到设定点......并且您想让动画“更平滑”？

为了使其更流畅，您只需降低 setInterval [delay] 的第二个参数，以便调用第一个参数 [function to call] 更多...

此外，您可以使用公式在末尾添加一个减速的补间
rect.h = (rect.h*N+targetHeight)/(N+1)......其中 N > 1...
这样一开始，条形会增长很多，然后最终会减慢增长到目标高度。