zoukankan      html  css  js  c++  java
  • 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绘制一次。这样就不会存在过度绘制的问题,动画不会掉帧,自然就流畅。

  • 相关阅读:
    [BZOJ3884] 上帝与集合的正确用法
    [BZOJ3518] 点组计数
    [BZOJ3601] 一个人的数论
    [BZOJ3529] [Sdoi2014]数表
    原生js实现无缝滚动轮播图-点击页码即刻显示该页码的内容
    原生js实现无缝滚动轮播图
    vue封装tinymce富文本组件,图片上传回调方法
    vue-cli项目结合Element-ui基于cropper.js封装vue图片裁剪组件
    js实现多文件上传(二)-- 拖拽上传
    js实现多文件上传(一)-- 图片转base64回显
  • 原文地址:https://www.cnblogs.com/chenzhiyu/p/8080172.html
Copyright © 2011-2022 走看看