zoukankan      html  css  js  c++  java
  • JS之BOM篇requestAnimationFrame

    HTML5新增了一个定时器requestAnimationFrame,旨在让动画操作更顺畅,更简单,更高效。requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果

    使用

    requestAnimationFrame的使用方法和setTimeout类似,只是不需要设置时间间隔。requestAnimationFrame使用一个回调函数作为参数,该函数会在浏览器重绘之前调用。它会返回一个整数表示定时器编号,可以传递给cancelAnimationFrame用于取消这个函数的执行

    var timer = requestAnimationFrame(function(){
      console.log(timer)
    })
    console.log(0)
    // 0
    // 1
    

    cancelAnimationFrame取消定时器

    var timer = requestAnimationFrame(function(){
      console.log(timer)
    })
    cancelAnimationFrame(timer)
    
    var timer = requestAnimationFrame(function(){
      console.log(timer)
    })
    cancelAnimationFrame(1)
    

    兼容

    IE9-浏览器不支持requestAnimationFrame方法,可以使用setTimeout代替

    if (!window.requestAnimationFrame) {
       window.requestAnimationFrame = function(fn) {
        setTimeout(fn, 17);
      };
       window.cancelAnimationFrame = function(id) {
          clearTimeout(id);
      };
    }
    

    应用

    一个简单的进度条效果

    <div id="box" style=" 0;height: 20px;line-height: 20px;background: teal">0%</div>
    <button id="btn">开始</button>
     <script>
       var timer;
       btn.onclick = function() {
         box.style.width = 0;
         cancelAnimationFrame(timer);
         timer = requestAnimationFrame(function fn() {
          if(parseInt(box.style.width) < 500) {
            box.style.width = parseInt(box.style.width) + 5 + 'px';
            box.innerHTML = parseInt(box.style.width) / 5 + '%';
            timer = requestAnimationFrame(fn)
          }else{
            cancelAnimationFrame(timer);
          }
         })
       }
     </script>
    
    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    获取有关控件的坐标
    Android PopupWindow的使用和分析
    Android RecyclerView 使用完全解析 体验艺术般的控件
    TextView中显示价格并且中间直接有一个横线
    Android Studio
    移动开发】Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)
    Android中visibility属性VISIBLE、INVISIBLE、GONE的区别
    理解Java的IO流 2015年8月6日 21:30:38
    算法导论学习随笔——第七章 快速排序
    oj 1031 random permutation
  • 原文地址:https://www.cnblogs.com/yesyes/p/15352575.html
Copyright © 2011-2022 走看看