js/javaScript通过setTimeout做动画和需要注意的点

最新推荐文章于 2024-10-18 08:23:10 发布

原创最新推荐文章于 2024-10-18 08:23:10 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#requestAnimationFrame #setTimeout动画

js 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了使用setTimeout实现动画时的最佳时间间隔，并介绍了requestAnimationFrame方法及其优势。为了获得平滑的动画效果，通常建议的时间间隔为16.7毫秒。然而，requestAnimationFrame能够更好地与浏览器同步，提供更流畅的动画体验。

一、用setTimeout做动画时每帧动画时间间隔设置为多少合适？

因为目前大多数电脑显示器的刷新频率是60HZ，大多数浏览器都会对页面重绘操作加以限制，使其不超过显示器的重绘频率；因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环时间间隔是1000/60s 约为16.7ms

所以一般用setTimeout做动画时间间隔设置为16.6ms是最佳的：setTimeout(function(){animateRun()},16.7)，

但即使是这样，用setTimeout设置的动画也会存在不流畅的情况，而为了解决这个问题requestAnimationFrame应运而生

二、requestAnimationFrame方法是专门为动画而生，采用系统时间间隔，保持最佳绘制效率,在运行时浏览器会自动优化方法的调用。

1.使用window.requestAnimationFrame(callback)简写为requestAnimationFrame(callback)；

2.和setTimeout或者setInterval一样requestAnimationFrame也有取消定时器的方法：cancelAnimationFrame

var timer = requestAnimationFrame(aimateRun); //aimateRun是自己定义的动画方法

cancelAnimationFrame(timer) //取消定时器

3.兼容谷歌浏览器，火狐浏览器，IE10+

三、兼容方法

    var s = 0,e = 10;
    function animateRun(){
      // 要执行的动画
      // style.width = ....

      if (s < e) {// 满足执行动画的条件在执行回调,本例用数字举例
        s++;
        //如果支持requestAnimationFrame
        if (window.requestAnimationFrame) {
          window.requestAnimationFrame(animateRun)
          //不支持用setTimeout
        } else {
          setTimeout(function(){animateRun()}, 16.7)
        }
      }
    }
    