用requestAnimationFrame替代setInterval制作匀速动画

jieyucx

已于 2023-04-23 10:39:06 修改

阅读量782

点赞数

分类专栏：菜鸟的踩坑之旅文章标签： css css3 html

于 2023-04-21 17:22:55 首次发布

本文链接：https://blog.csdn.net/jieyucx/article/details/130292917

版权

菜鸟的踩坑之旅专栏收录该内容

65 篇文章 6 订阅

订阅专栏

代码之前的介绍来自于这里requestAnimation介绍
了解过事件循环机制的朋友应该知道，siteTimeout和setInterval并不是精准的时间间隔，他们要等待其他优先的执行队列执行完成以后才能继续执行。

于是就引入了一个新的动画执行方式-- window.requestAnimationFrame()。它告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

它采用的是系统时间间隔，以保证最佳的绘制效率，不会因为时间过短造成过度绘制，也不会因为时间间隔太长，产生动画卡顿的现象。让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

特点
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

应用
requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

let retID = requestAnimationFrame(callback);

取消的话可直接使用canceAnimationFrame来进行取消即可

cancelAnimationFrame(retID)

先来看个setInterval动画的例子

效果如图：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        overflow: hidden;
      }
      .item-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 500px;
        width: 100px;
      }
      .item {
        width: 50px;
        height: 50px;
        background-color: blue;
        border-radius: 50%;
        margin-top: 10px;
        z-index: 100;
      }
      .open {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button id="btn1">改变高度</button>
    <div id="box">
      <div class="open">展开</div>
      <div class="item-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
    </div>
    <script>
      window.addEventListener("load", function (ev) {
        var box = document.getElementById("box");
        var flag = true;
        // 执行动画，改变盒子高度
        document.getElementById("btn1").addEventListener("click", function (ev) {
          if (flag) {
            buffer(box, "height", 500);
            flag = false;
          } else {
            buffer(box, "height", 100);
            flag = true;
          }
        });
      });
      // 获取当前元素样式
      function getStyleAttr(obj, attr) {
        if (obj.currentStyle) {
          // IE 和 opera
          return obj.currentStyle[attr];
        } else {
          return window.getComputedStyle(obj, null)[attr];
        }
      }
      // 迅速动画函数
      function buffer(eleObj, attr, target) {
        //1.1先清后设
        clearInterval(eleObj.timer);

        var speed = 0,
          begin = 0;
        //1.2设置定时器
        eleObj.timer = setInterval(function () {
          //获取动画属性的初始值
          begin = parseInt(getStyleAttr(eleObj, attr));

          speed = (target - begin) * 0.2;
          speed = target > begin ? Math.ceil(speed) : Math.floor(speed);

          eleObj.style[attr] = begin + speed + "px";

          if (begin === target) {
            clearInterval(eleObj.timer);
          }
        }, 20);
      }
    </script>
  </body>
</html>

用requestAnimationFrame代替setInterval重写buffer函数

 // 动画函数
        buffer(eleObj, attr, target) {
            // 先清后设
            cancelAnimationFrame(eleObj.timer)
            let speed = 0
            let begin = 0
            let _this = this
            eleObj.timer = requestAnimationFrame(function fn() {
                begin = parseInt(_this.getStyleAttr(eleObj, attr))
                // 动画速度
                speed = (target - begin) * 0.9
                speed = target > begin ? Math.ceil(speed) : Math.floor(speed)
                eleObj.style[attr] = begin + speed + "px"
                eleObj.timer = requestAnimationFrame(fn)
                if (begin === target) {
                    cancelAnimationFrame(eleObj.timer);
                }
            })
        },
        getStyleAttr(obj, attr) {
            if (obj.currentStyle) {
              // IE 和 opera
              return obj.currentStyle[attr];
            } else {
              return window.getComputedStyle(obj, null)[attr];
            }
        }

jieyucx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用requestAnimationFrame替代setInterval制作匀速动画

了解过事件循环机制的朋友应该知道，和并不是精准的时间间隔，他们要等待其他优先的执行队列执行完成以后才能继续执行。于是就引入了一个新的动画执行方式--。它告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。它采用的是系统时间间隔，以保证最佳的绘制效率，不会因为时间过短造成过度绘制，也不会因为时间间隔太长，产生动画卡顿的现象。
复制链接

扫一扫