这两天做一个公告展示轮播的动画，刚开始是用setinterval写的，后来发现做出来的动画效果有抖动的现象，动画不流畅，遂决定试试requestAnimationFrame，之前也只是耳闻，没有用过，用过之后发现：“哎呦喂，不错哦！”
我们看代码
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>记录滚动</title> <style> .panel{ width:340px; padding:10px; text-align: center; background-color:#FF3C3C; border-radius: 0 0 8px 8px; } h2{ color:#fff; margin: 5px; } .activity{ width: 300px; margin: 0 auto; position: relative; overflow: hidden; height: 165px; background-color: #fff; border-radius: 5px; } .activity ul{ top: -15px; padding: 0; color: #666; position: relative; } .activity li{ height: 34px; padding:0; font-size: 12px; line-height: 34px; list-style: none; border-bottom: 1px dotted #d2d2d2; } </style> </head> <body> <div class="panel"> <h2>公告展示</h2> <div class="activity" id="J_Activity"> <ul> <li>我是公告列表1</li> <li>我是公告列表2</li> <li>我是公告列表3</li> <li>我是公告列表4</li> <li>我是公告列表5</li> </ul> </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript" charset="utf-8"> $(function () { var listPanel = $('#J_Activity ul'); var timer; var z = 0; function animate(){ requestAnimationFrame(function fn(){ z-=.3; if(z<=-35){ z = 0; listPanel.find("li:first").appendTo(listPanel); } listPanel.css('top',z); timer = requestAnimationFrame(fn); }); } animate(); listPanel.on('mouseenter',function(){ cancelAnimationFrame(timer); //停止 }) listPanel.on('mouseleave',function(){ animate(); //继续运动 }) }); </script> </html>
我们看到和setinterval和settimeout的用法，几乎完全一样，只是没有时间这个参数，这也正是requestAnimationFrame的高明之处，因为它的渲染是跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那它就是16.8ms绘制一次；如果浏览设备绘制间隔是10ms, 那它就是10ms绘制一次。这样就不会存在过度绘制的问题，动画不会掉帧，自然就流畅。