requestAnimationFrame() 动画效果的函数
2018-01-17 18:47
274 查看
window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了,并且要求浏览器调用相应的方法来更新画面,这个方法就是传递给requestAnimationFrame的回调函数。
这个方法原理其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
例子
模拟一个进度条动画,初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上,在进度达到100之前,一直重复这一过程。
为了演示方便加了一个运行按钮。
关于浏览器兼容可以看这里
转载自:http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html
这个方法原理其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
requestAnimationFrame(callback)//callback为回调函数
例子
模拟一个进度条动画,初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上,在进度达到100之前,一直重复这一过程。
为了演示方便加了一个运行按钮。
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div> <input type="button" value="Run" id="run"/>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var start = null; var ele = document.getElementById("test"); var progress = 0; function step(timestamp) { progress += 1; ele.style.width = progress + "%"; ele.innerHTML=progress + "%"; if (progress < 100) { requestAnimationFrame(step); } } requestAnimationFrame(step); document.getElementById("run").addEventListener("click", function() { ele.style.width = "1px"; progress = 0; requestAnimationFrame(step); }, false);
关于浏览器兼容可以看这里
转载自:http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html
相关文章推荐
- canvas动画函数requestAnimationFrame
- requestAnimationFrame 实现更流畅,高效的动画效果
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
- 缓动函数requestAnimationFrame 更好的实现浏览器经动画
- 使用requestAnimationFrame做动画效果二
- 使用canvas画的圆形水球波纹带进度条的效果,里面使用的是requestAnimationFrame方法(),所以动画的执行只在区域可见的时候才会执行
- [前端] requestAnimationFrame 实现动画效果
- 新动画函数requestAnimationFrame
- 动画函数requestAnimationFrame
- 使用RequestAnimationFrame优化PC端动画效果的N+1个原因
- webvr动画函数requestAnimationFrame
- 验证requestAnimationFrame、CSS3以及setinterval实现动画效果的优劣
- 实现更高级的动画效果—requestAnimationFrame
- 使用requestAnimationFrame做动画效果一
- 缓动函数requestAnimationFrame 更好的实现浏览器经动画
- window.requestAnimationFrame() 实现动画效果
- 新动画函数requestAnimationFrame
- Javascript : RequestAnimationFrame更好的实现Javascript动画
- CSS3动画那么强,requestAnimationFrame还有毛线用。
- JS:指定FPS帧频,requestAnimationFrame播放动画