js缓冲运动——》封装动画函数

程序员文章站 2022-07-08 16:15:13

缓冲运动缓冲运动：在固定距离中做减速运动缓冲运动与减速运动的区别：减速运动不确定最终停止的位置，缓冲运动在特定位置停止。效果：代码： <...

缓冲运动

缓冲运动： 在固定距离中做减速运动
缓冲运动与减速运动的区别： 减速运动不确定最终停止的位置，缓冲运动在特定位置停止。
效果：
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            bottom: 300px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgb(223, 167, 14);
        }
    </style>
</head>

<body>
<!-- 在减速运动与缓冲运动的区别：减速运动不确定最终停止的位置，缓冲运动在特定位置停止 -->
    <div class="box"></div>
    <script>
        // 在固定距离中做减速运动
        //当box的left = 600的时候，就停止
        let box = document.querySelector('.box');
        let x = 0;
        let speed = 120; //初始速度
        var target = 600; //目标距离，停止的位置
        let timer = setInterval(() => {
            //速度逐渐减小，10为一个系数，在目标值与走过的距离相等时，速度变为0
            /* 
            （1）speed = (target - x)/ 10;时，left存在小数
            （2）直接取整时：speed = parseInt((target - x)/ 10);
                最终x一直为591：
                比如为x到了591 
                speed:600-591=> 9 => 0.9 => 0(取整速度就为0了)
                继续走下一步：x = x + speed;因为speed为0，此时x不会在改变了。
                x始终无法等于target（600），定时器不会清除
            （3）采用向上取整：考虑到最后的speed将减小到0-1之间的小数（比如0.9、 0.8、 0.7），
                 采用向上取整时，speed都会变成1，x也会一直保持增加，知道x到了600，speed变为0。且满足了x==600==target,会清除定时器。

                 添加测试（查看变化）：console.log("速度为" + speed);            
                          console.log("x="+x);
            */
            speed = Math.ceil((target - x) / 10);//向上取整
            console.log("速度为" + speed);
            // 走过的距离
            x = x + speed;
            console.log("x="+x);
            // 当走过的距离达到目标位置时，就清除定时器
            if (x == target) {
                clearInterval(timer);
                console.log(1)
            }
            box.style.left = x + 'px';
        }, 100)
    </script>

</body>

</html>

封装动画函数

将该缓冲运动应用到对某一元素的一些属性的变化上，把该功能封装成一个函数。

测试函数案例：将div的宽高增加到600px与300px
js缓冲运动——》封装动画函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装缓冲函数</title>
    <script src="util.js"></script>
    <style>
        .box {
            position: absolute;
            left: 0px;
            width: 100px;
            height: 100px;
            background: rgb(21, 147, 185);
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        let box = document.querySelector('.box');
        move(box, {
            width: 600,
            height: 300
        })
        /* 
                 参数：(1)使用动画的元素elem
                       (2)使用动画的属性以及每个属性的目标值attr_tar_option {}   
                            {
                              width：600;
                              height:300; 
                             } 
        */
        function move(elem, attr_tar_option) {
            let speed; //变化的速度
            for (let key in attr_tar_option) {
                let timer = setInterval(() => {
                    let x = parseInt(getStyle(elem, key)); // x为初始值,需要获取要使用动画的属性的初始值
                    let target = attr_tar_option[key]; //目标距离，停止的位置

                    speed = Math.ceil((target - x) / 10) //不断减少变化的速度

                    x = x + speed;

                    elem.style[key] = x + 'px';
                    console.log(key)
                    if (x == attr_tar_option[key]) {
                        clearInterval(timer);
                    }
                }, 100)
            }
        }
    </script>
</body>

</html>

优化1.0（定时器问题）

上面的函数还存在一个问题：（下面将该函数进行优化）
例：在点击时再进行该动画：如果点击一次之后，动画未执行结束，再次点击，动画的速度会加快，因为此时相当于开启了两个定时器。
js缓冲运动——》封装动画函数
该案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        封装动画02
    </title>
    <script src="util.js"></script>
    <style>
        .box {
            position: relative;
            left: 0px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点击</button>
    <script>
        let box = document.querySelector('.box');
        let btn = document.querySelector('button');
        var n =0;
        btn.onclick = ()=>{
            n++;
            move(box,{width:600})
        }//多次点击按钮时，变化速度会变快，点击多次时相当于有多个个定时器作用在box上


        function move(elem, attr_tar_option) {
            let speed; //变化的速度
            for (let key in attr_tar_option) {
                let timer = setInterval(() => {
                    let x = parseInt(getStyle(elem, key)); // x为初始值,需要获取要使用动画的属性的初始值
                    let target = attr_tar_option[key]; //目标距离，停止的位置

                    speed = Math.ceil((target - x) / 10) //不断减少变化的速度

                    x = x + speed;

                    elem.style[key] = x + 'px';
                    console.log(key)
                    if (x == attr_tar_option[key]) {
                        clearInterval(timer);
                        console.log(n+'次执行结束')
                    }
                }, 1500)
            }
        }
    </script>
</body>
</html>

如果在一次动画执行完毕之前点击6次，最终执行结束时打印结果：
js缓冲运动——》封装动画函数

解决：先给move()函数在点击后运行定时器之前添加clearInterval(timer)将定时器进行清除，实际这种做法在该位置是获取不到timer的，更无法清除。
js缓冲运动——》封装动画函数
报错：
换成var定义：（var 这里将其预解析，只会打印undefined,上次点击执行的timer，在下次点击时是不会获取到的）

js缓冲运动——》封装动画函数

原因分析：每次点击触发点击事件时，都会开启一个新的函数执行空间
js缓冲运动——》封装动画函数
解决：将定时器存储在对象当中，这样可以在下一次开启的执行空间中将定时器获取到并清除。

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        封装动画02
    </title>
    <script src="util.js"></script>
    <style>
        .box {
            position: relative;
            left: 0px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点击</button>
    <script>
        let box = document.querySelector('.box');
        let btn = document.querySelector('button');
        var n =0;
        btn.onclick = ()=>{
            n++;
            move(box,{width:600})
        }//多次点击按钮时，变化速度会变快，点击多次时相当于有多个个定时器作用在box上


        function move(elem, attr_tar_option) {
            let speed; //变化的速度
            for (let key in attr_tar_option) {
                clearInterval(elem[key])// 把定时器存储为对象elem的属性,属性名就取为使用定时器的对应属性名
                elem[key] = setInterval(() => {
                    let x = parseInt(getStyle(elem, key)); // x为初始值,需要获取要使用动画的属性的初始值
                    let target = attr_tar_option[key]; //目标距离，停止的位置
                    speed = Math.ceil((target - x) / 10) //不断减少变化的速度
                    x = x + speed;
                    elem.style[key] = x + 'px';
                    if (x == attr_tar_option[key]) {
                        clearInterval(elem[key]);
                        console.log(n+'次执行结束')
                    }
                }, 100)
            }
        }
    </script>
</body>
</html>

优化2.0

每个属性的定时器执行到清除的时间不同，对动画结束时间进行判断，并采用回调函数对动画执行结束后进行处理。
js缓冲运动——》封装动画函数
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        封装动画02
    </title>
    <script src="util.js"></script>
    <style>
        .box {
            position: relative;
            left: 0px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点击</button>
    <script>
        let box = document.querySelector('.box');
        let btn = document.querySelector('button');
        btn.onclick = ()=>{
            move(box,{width:600,height:300,left:100},function(){
                alert('动画执行完毕')
            })
        }


        function move(elem, attr_tar_option,callback) {
            let speed; //变化的速度
            let len = 0;//用来记录定时器的个数
            for (let key in attr_tar_option) {
                clearInterval(elem[key])// 把定时器存储为对象elem的属性,属性名就取为使用定时器的对应属性名
                len++;//每增加一个定时器，将len加1
                elem[key] = setInterval(() => {
                    let x = parseInt(getStyle(elem, key)); // x为初始值,需要获取要使用动画的属性的初始值
                    let target = attr_tar_option[key]; //目标距离，停止的位置
                    speed = Math.ceil((target - x) / 10) //不断减少变化的速度
                    x = x + speed;
                    elem.style[key] = x + 'px';
                    if (x == attr_tar_option[key]) {
                        clearInterval(elem[key]);
                        len--;//每清除一个，将len减1
                        if(len == 0){//说明动画执行完毕
                            callback && callback();//前面的值为真时，才执行后面的值。这种写法可以在调用move()函数时不传回调函数这个参数
                        }
                    }
                }, 100)
            }
        }
    </script>
</body>
</html>

优化3.0

修改函数让其同时适用于透明度：
例：opacity 初始值1——目标值0.5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        封装动画02
    </title>
    <script src="util.js"></script>
    <style>
        .box {
            position: relative;
            left: 0px;
            width: 100px;
            height: 100px;
            background: red;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button>点击</button>
    <script>
        let box = document.querySelector('.box');
        let btn = document.querySelector('button');
        btn.onclick = () => {
            move(box, {
                opacity: 50, //扩大100
            }, function () {
                alert('动画执行完毕')
            })
        }

        /* 
            (1)如果是opacity,获取时可以不取整
            （2）如果是opacity,是没有单位"px" :

                        if(key=='opacity'){
                            elem.style[key] = x;
                        }else{
                            elem.style[key] = x + 'px';
                        }
            (3)opacity的值在0-1之间，如果是1=》0.5 ，
                定时器第一次执行：
                    传入 x=1  target=0.5  target-x=-0.5 
                    speed=>-0.5/10=>(-0.05)=>向上取整为0
                    x=1+0=1; x将一直保持不变 定时器也会一直执行
                解决：获取opacity时将值扩大，设置时再将其缩小
                10倍：x=10  target=5  target-x=-5 
                    speed=>-5/10=>(-0.5)=>向上取整为0
                    x=10+0=10; 所以扩大十倍（X）
                100倍：x=100  target=50  target-x=-50 
                    speed=>-50/10=>(-5)
                    x=100-5=95; 值开始改变
            （4）1到0.5时(100-50)，最终x一直为59，原因：
                    x为60时，target=50  target-x=-10 
                    speed=>-10/10=>(-1)=>向上取整为-1
                    x=60-1=59;  
                    x为59时，target=50  target-x=-9 
                    speed=>-9/10=>(-0.9)=>向上取整为0
                    x=59-0=59;  x又开始不再变化 

                    修改：speed小于0时，向下取整，-0.9取为-1
        */
        function move(elem, attr_tar_option, callback) {
            let speed;
            let len = 0;
            for (let key in attr_tar_option) {
                clearInterval(elem[key])
                len++;
                elem[key] = setInterval(() => {
                    let x;
                    //修改（1）
                    if (key == 'opacity') {
                        // 修改（3）统一在获取透明度和设置透明度的目标值的时候 都乘以100
                        x = getStyle(elem, key) * 100
                    } else {
                        x = parseInt(getStyle(elem, key));
                    }

                    let target = attr_tar_option[key];
                    // 修改4
                    speed = (target - x) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    x = x + speed;
                    console.log(x);

                    // 修改（2）
                    if (key == 'opacity') {
                        elem.style[key] = x / 100; // 修改（3）
                    } else {
                        elem.style[key] = x + 'px';
                    }
              
                    if (x == attr_tar_option[key]) {
                        clearInterval(elem[key]);
                        len--;
                        if (len == 0) {
                            callback && callback();
                        }
                    }
                }, 100)
            }
        }
    </script>
</body>

</html>

js缓冲运动——》封装动画函数

最终封装的函数(可直接使用)

// elem:动画作用的元素， attr_tar_option:元素的属性
//可选：callback回调函数
function move(elem, attr_tar_option, callback) {
    let speed;
    let len = 0;//标记正在执行的定时器的个数
    for (let key in attr_tar_option) {
        clearInterval(elem[key])//清除这个元素对象上的定时器,（elem[key]属性key没有就添加，存在就覆盖）
        len++;
        elem[key] = setInterval(() => {//将定时器作为对象的属性
            let x;//不断改变的属性值
            if (key == 'opacity') {
                x = getStyle(elem, key) * 100
            } else {
                x = parseInt(getStyle(elem, key));
            }

            let target = attr_tar_option[key];//目标值
       
            speed = (target - x) / 10;//变化速度
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
            x = x + speed;
            if (key == 'opacity') {
                elem.style[key] = x / 100; 
            } else {
                elem.style[key] = x + 'px';
            }
            if (x == attr_tar_option[key]) {//达到目标值后清除定时器
                clearInterval(elem[key]);
                len--;
                if (len == 0) {//判断是否所有的定时器都清除，以此判断动画是否执行完毕
                    callback && callback();//前面的值为真时，才执行后面的值。这种写法可以在调用move()函数时不传回调函数这个参数
                }
            }
        }, 100)
    }
}

本文地址：https://blog.csdn.net/qq_43812504/article/details/112557836

js缓冲运动——》封装动画函数

缓冲运动

封装动画函数

优化1.0（定时器问题）

优化2.0

优化3.0

最终封装的函数(可直接使用)

PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数

JS实现匀速与减速缓慢运动的动画效果封装示例

JS轮播图中缓动函数的封装

JS实现图片旋转动画效果封装与使用示例

js运动之缓冲运动代码实例讲解

JS---封装缓动（变速）动画函数---增加任意一个属性

JS---封装缓动（变速）动画函数---增加多个任意多个属性

JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

JS基于封装函数实现的表格分页完整示例

JS---案例：手风琴（利用封装好的动画函数）

js缓冲运动——》封装动画函数

缓冲运动

封装动画函数

优化1.0（定时器问题）

优化2.0

优化3.0

最终封装的函数(可直接使用)

PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数

JS实现匀速与减速缓慢运动的动画效果封装示例

JS轮播图中缓动函数的封装

JS实现图片旋转动画效果封装与使用示例

js运动之缓冲运动代码实例讲解

JS---封装缓动（变速）动画函数---增加任意一个属性

JS---封装缓动（变速）动画函数---增加多个任意多个属性

JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

JS基于封装函数实现的表格分页完整示例

JS---案例：手风琴 （利用封装好的动画函数）

JS---案例：手风琴（利用封装好的动画函数）