1

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

4

2 回答 2

2

不不不。用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);
})();
于 2011-10-11T20:29:38.660 回答
0

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

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

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

于 2010-05-17T01:13:41.643 回答