27. 封装一个动画函数

Mr_LiuP

已于 2022-03-02 10:42:33 修改

阅读量307

点赞数 1

分类专栏： JavaScript 文章标签：动画 html html5

于 2022-03-02 10:42:17 首次发布

本文链接：https://blog.csdn.net/Mr_LiuP/article/details/123224329

版权

JavaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、动画实现基本原理

通过定时器 setInterval() 不断移动盒子的位置来实现动画

实现步骤：

1、获得盒子的当前位置

2、让盒子在当前位置上加上1个移动距离

3、利用定时器不断重复这个操作

4、加一个结束定时器的操作

5、此元素需要添加定位，此案能使用element.style.left

二、动画函数的简单封装

简单动画函数封装，obj目标对象，target是目标位置

给不同的元素指定了不同的定时器，通过obj.timer来实现

        function animate(obj, target) {

            // 当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

            // 解决办法：让我们的元素只有一个定时器，在每次调用函数后先清除之前的定时器

            clearInterval(obj.timer);

            obj.timer = setInterval(function() {

                if (obj.offsetLeft >= target) {

                    // 停止定时器

                    clearInterval(obj.timer);

                }

                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30)

        }

        animate(div, 300);

三、缓动效果实现原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1、让盒子每次移动的距离慢慢变小，速度就会慢慢降下来

2、核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离

3、停止的条件是，让当前盒子的位置等于目标位置就停止定时器

    var span = document.querySelector('span');

var btn = document.querySelector('button');

        // 简单动画函数封装，obj目标对象，target是目标位置

        // 给不同的元素指定了不同的定时器，通过obj.timer来实现

        function animate(obj, target, callback) {

          // console(callback); 相当于执行了callback = function(){} 调用的时候使用callback()

            // 当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

            // 解决办法：让我们的元素只有一个定时器，在每次调用函数后先清除之前的定时器

            clearInterval(obj.timer);

            obj.timer = setInterval(function() {

                // 步长值写到定时器的里面

// 把步长值修改为整数，正值就往上取整使用 Math.ceil，往回走是负值取整，使用Math.floor()

                var step = (target - obj.offsetLeft) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                if (obj.offsetLeft == target) {

                    // 停止定时器

                    clearInterval(obj.timer);

                                  // 回调函数写到计时器结束的里面

                                  if (callback) {

                                      // 调用函数

                                      callback();

                                   }

                }

                // 把每次加1, 这个步长值修改为一个慢慢变小的值，步长公式：（目标值 - 现在的位置） / 10

                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15)

        }

        btn.addEventListener('click', function() {

            animate(span, 800,function(){

              span.style.backgroundColor = 'red';

           });

        })