我正在使用画布制作图形脚本,正在向图表添加动画,但我不喜欢它的外观,例如,我使用 setInterval for X 函数向矩形添加高度以制作条形图,但是我想要一个更流畅的动画,是另一种制作动画的方法吗?
user337927
问问题
937 次
2 回答
2
不不不。用JS创建动画的三种方式:
- 设置超时()
- 设置间隔()
- 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 回答