欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-08 16:15:13
缓冲运动缓冲运动: 在固定距离中做减速运动缓冲运动与减速运动的区别: 减速运动不确定最终停止的位置,缓冲运动在特定位置停止。效果:代码: <...

缓冲运动

  • 缓冲运动: 在固定距离中做减速运动
  • 缓冲运动与减速运动的区别: 减速运动不确定最终停止的位置,缓冲运动在特定位置停止。
  • 效果:
    js缓冲运动——》封装动画函数
  • 代码:
<!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缓冲运动——》封装动画函数
报错:js缓冲运动——》封装动画函数
换成var定义:(var 这里将其预解析,只会打印undefined,上次点击执行的timer,在下次点击时是不会获取到的)
js缓冲运动——》封装动画函数

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

原因分析:每次点击触发点击事件时,都会开启一个新的函数执行空间
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

相关标签: javaScript 前端