画布动画答案

【问题标题】：Canvas Animation画布动画
【发布时间】：2011-10-12 04:29:38
【问题描述】：

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

【问题讨论】：

标签应该改变。流体意味着该人正在尝试进行水模拟或其他东西>_>

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：