requestAnimationFrame、前端动画实现方式总结与优化（大全）

首先总结一下：requestAnimationFrame

一、原理

requestAnimationFrame()的原理：

当你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次。（ps：多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上手动实现动画的最小间隔为1/60＊1000ms ＝ 16.7ms。）
由于是跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

二、使用

var progress = 0;
//回调函数
function render() {  
  progress += 1; //修改图像的位置  
  if (progress < 100) {  //在动画没有结束前，递归渲染    
    window.requestAnimationFrame(render); 
  }
}
//第一帧渲染
window.requestAnimationFrame(render);复制代码

三、优势

• CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
• 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

四、其他动画实现方式

• css3的transition属性：过渡、只管开始和结束
• css3的animation属性：keyframes逐帧动画
• 原生js动画：setInterval或setTimeout回调。（页面频繁性重排重绘，消耗性能，移动端卡顿）
• canvas动画：借助Web API来实现动画（getContext()获取元素，clearRect配合fillStyle）
• svg动画：xml（seo、可编程、可压缩）
• jQuery的animate()函数：改变css
• gif动画

五、性能优化

• js动画移动端卡顿问题：一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。
• 代码复杂度应用：简单动画使用css、复杂动画用js。
• 动画灵活性：js可控制交互，css不能添加事件。
• 兼容问题：css有浏览器兼容问题，js很少。
• 性能问题：css动画优一些，浏览器会对css3动画优化，并且直接通过GUI解析。js动画需要js引擎先解析代码，再进行GUI渲染。