Web动画优化--requestAnimationFrame

什么是requestAnimationFrame

window.requestAnimationFrame（callback）方法告诉浏览器您希望执行动画，并请求在下一次重新绘制之前,浏览器调用指定的函数更新。 callback该方法作为参数，在重绘之前调用回调。

例如：

1var i = 0
2function step() {
3  console.log(i++)
4  window.requestAnimationFrame(step) //调用step自身
5}
6window.requestAnimationFrame(step)

此例中step方法中必须调用requestAnimationFrame，才能循环输出

优点

该方法通过在系统准备好绘制动画帧时调用该帧，从而为创建动画网页提供了一种更平滑更高效的方法。在此 API 之前，使用 setTimeout 和 setInterval 绘制的动画并没有为 Web 开发人员提供有效的方法来规划动画的图形计时器。这导致了动画过度绘制，浪费 CPU 周期以及消耗额外的电能等问题。而且，即使看不到网站，特别是当网站使用背景选项卡中的页面或浏览器已最小化时，动画都会频繁出现。

具体可以查看<a href="https://msdn.microsoft.com/library/hh920765(v=vs.85).aspx" target="_blank">MSDN</a>

使用方法

requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

对上面的方法进行修改

1var i = 0
2var time
3function step() {
4  console.log(i++)
5  time = window.requestAnimationFrame(step)
6  if (i > 10) {
7    cancelAnimationFrame(time) //取消动画
8  }
9}
10time = window.requestAnimationFrame(step)

兼容性

在老的浏览器中，requestAnimationFrame的方法名是带浏览器前缀的。以下是张鑫旭为在各个浏览器中能统一的调用requestAnimationFrame做的处理。不支持requestAnimationFrame的用setTimeout来代替。

1/* requestAnimationFrame.js
2 * by zhangxinxu 2013-09-30
3 */
4;(function () {
5  var lastTime = 0
6  var vendors = ['webkit', 'moz']
7  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
8    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
9    window.cancelAnimationFrame =
10      window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
11      window[vendors[x] + 'CancelRequestAnimationFrame']
12  }
13
14  if (!window.requestAnimationFrame) {
15    window.requestAnimationFrame = function (callback, element) {
16      var currTime = new Date().getTime()
17      var timeToCall = Math.max(0, 16.7 - (currTime - lastTime))
18      var id = window.setTimeout(function () {
19        callback(currTime + timeToCall)
20      }, timeToCall)
21      lastTime = currTime + timeToCall
22      return id
23    }
24  }
25  if (!window.cancelAnimationFrame) {
26    window.cancelAnimationFrame = function (id) {
27      clearTimeout(id)
28    }
29  }
30})()

版权信息

链接/posts/web-dong-hua-you-hua-requestanimationframe

日期2017/05/03

协议CC BY-NC-SA 4.0 转载请注明出处

暂无评论，来抢沙发吧。