摘要:你需要知道的随着前端的发展,已经能够实现非常多的动画特效,但是仍然存在无法完成的动画任务比如页面滚动,通常的解决方案都是使用中的来设置定时器来实现动画特效,比如下面的一个基本的动画循环。
你需要知道的requestAnimationFrame
随着前端的发展,css已经能够实现非常多的动画特效,但是仍然存在css无法完成的动画任务(比如页面滚动),通常的解决方案都是使用js中的setInterval来设置定时器来实现动画特效,比如下面的一个基本的动画循环。
(function() { function updateAnimations() { doAnimation1(); doAnimation2(); } setInterval(updateAnimations, 100); })();
该代码实现的功能是每隔100毫秒执行函数操作来达到动画效果,然而,使用计时器真的可靠吗?
答案当然是 no
由于JavaScript是单线程的,所以定时器的实现是在当前任务队列完成后再执行定时器的回调的,假如当前队列任务执行时间大于定时器设置的延迟时间,那么定时器就不是那么可靠了,如下所示:
let startTime = new Date().getTime(); setTimeout(()=>{ let endTime = new Date().getTime(); console.log(endTime - startTime); },50) for(let i=0;i<20000;i++) { console.log(1); }
输出如下
可以看到,设置了50毫秒后执行,实际执行延迟时间远大于这个数值,这就会导致动画效果并不会达到想要的效果。
动画是由浏览器按照一定的频率一帧一帧的绘制的,由css实现的动画的优势就是浏览器知道动画的开始及每一帧的循环间隔,能够在恰当的时间刷新UI,给用户一种流畅的体验,而setInterval或setTimeout实现的JavaScript动画就没有这么可靠了,因为浏览器压根就无法保证每一帧渲染的时间间隔,一般情况下,每秒平均刷新次数能够达到60帧,就能够给人流畅的体验,即每过 1000/60 毫秒渲染新一帧即可,但从上面的例子知,这一点单靠定时器是无法保证的。
为此,requestAnimationFrame应运而生,其作用就是让浏览器流畅的执行动画效果。可以将其理解为专门用来实现动画效果的api,通过这个api,可以告诉浏览器某个JavaScript代码要执行动画,浏览器收到通知后,则会运行这些代码的时候进行优化,实现流畅的效果,而不再需要开发人员烦心刷新频率的问题了。
使用方法如下:
function animationWidth() { var div = document.getElementById("box"); div.style.width = parseInt(div.style.width) + 1 + "px"; if(parseInt(div.style.width) < 200) { requestAnimationFrame(animationWidth) } } requestAnimationFrame(animationWidth);
效果如下(GIF录制的有点卡。。。实际效果请参考示例):
可以看到,requestAnimationFrame接受一个动画执行函数作为参数,这个函数的作用是仅执行一帧动画的渲染,并根据条件判断是否结束,如果动画没有结束,则继续调用requestAnimationFrame并将自身作为参数传入。从示例来看,得到了效果平滑流畅的动画,这样就巧妙地避开了每一帧动画渲染的时间间隔问题。
requestAnimationFrame的兼容性参考caniuse
在高级浏览器中,开发人员不用去操心每一帧动画渲染的时间间隔问题,而针对低版本浏览器,则需要使用setTimeout来模拟requestAnimationFrame,且针对不同浏览器对requestAnimationFrame的实现,这个api的名字也略有差异,针对低版本浏览器的模拟requestAnimationFrame的写法如下(来自张鑫旭大神的博客):
(function() { var lastTime = 0; var vendors = ["webkit", "moz"]; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || // Webkit中此取消方法的名字变了 window[vendors[x] + "CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }());
具体含义不做解释,如果遇到低版本浏览器的动画需求,你只需要把这段代码丢进去定义一个低配版requestAnimationFrame方法即可(珍爱生命,远离老浏览器啊)。
最后,再贴个部门工作中关于帧动画的示例
帅气的动画效果
参考:
JavaScript高级程序设计
CSS3动画那么强,requestAnimationFrame还有毛线用?
如有错误,欢迎指正!
我的github
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107482.html
摘要:即在回调被执行前,多次调用带有同一回调函数的,会导致回调在同一帧中执行多次。例子中的是由传给回调函数的,表示回调队列被触发的时间。完美的解决方案是通过来管理队列,其思路就是保证的队列里,同样的回调函数只有一个。 requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的...
摘要:即在回调被执行前,多次调用带有同一回调函数的,会导致回调在同一帧中执行多次。例子中的是由传给回调函数的,表示回调队列被触发的时间。完美的解决方案是通过来管理队列,其思路就是保证的队列里,同样的回调函数只有一个。 requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的...
摘要:即在回调被执行前,多次调用带有同一回调函数的,会导致回调在同一帧中执行多次。例子中的是由传给回调函数的,表示回调队列被触发的时间。完美的解决方案是通过来管理队列,其思路就是保证的队列里,同样的回调函数只有一个。 requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的...
摘要:即在回调被执行前,多次调用带有同一回调函数的,会导致回调在同一帧中执行多次。例子中的是由传给回调函数的,表示回调队列被触发的时间。完美的解决方案是通过来管理队列,其思路就是保证的队列里,同样的回调函数只有一个。 requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的...
摘要:即在回调被执行前,多次调用带有同一回调函数的,会导致回调在同一帧中执行多次。例子中的是由传给回调函数的,表示回调队列被触发的时间。完美的解决方案是通过来管理队列,其思路就是保证的队列里,同样的回调函数只有一个。 requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的...
阅读 2628·2021-09-13 10:26
阅读 1888·2021-09-03 10:28
阅读 1961·2019-08-30 15:44
阅读 761·2019-08-29 14:07
阅读 357·2019-08-29 13:12
阅读 2121·2019-08-26 11:44
阅读 2309·2019-08-26 11:36
阅读 1989·2019-08-26 10:19