当前位置：文江博客话题详情

画布动画

发布于 2024-09-01 01:13:06 字数 111 浏览 9 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞别 2024-09-08 01:13:06

不不不。使用 JS 创建动画有三种方法：

setTimeout()
setInterval()
requestAnimationFrame

选项 #1 和 #2 是创建动画的老式方法。选项 #3 是较新的规范，可产生最流畅的动画，因为浏览器本身会动态控制 FPS。这是 Paul Irish 创建的一个很棒的垫片，它创建了一个 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);
})();

no no no. There are three ways to create an animation with JS:

setTimeout()
setInterval()
requestAnimationFrame

options #1 and #2 are old-school ways of creating animations. option #3 is a newer spec and yields the smoothest animations because the browser itself is dynamically controlling the FPS. Here's an awesome shim created by Paul Irish that creates a requestAnimFrame wrapper to handle all browser implementations:

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

回复收藏 0 原文