H5中的requestAnimationFrame

这两天做一个公告展示轮播的动画，刚开始是用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绘制一次。这样就不会存在过度绘制的问题，动画不会掉帧，自然就流畅。

posted @ 2017-12-21 13:53  阿弥陀佛么么哒！  阅读(466)  评论(0)  编辑  收藏  举报