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

其他 2021-03-20 16:10:15 阅读次数: 0

缓冲运动

  • 缓冲运动： 在固定距离中做减速运动
  • 缓冲运动与减速运动的区别： 减速运动不确定最终停止的位置，缓冲运动在特定位置停止。
  • 效果：
    在这里插入图片描述
  • 代码：
<!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
在这里插入图片描述

<!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（定时器问题）

上面的函数还存在一个问题：（下面将该函数进行优化）
例：在点击时再进行该动画：如果点击一次之后，动画未执行结束，再次点击，动画的速度会加快，因为此时相当于开启了两个定时器。
在这里插入图片描述
该案例代码：

<!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次，最终执行结束时打印结果：
在这里插入图片描述

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

在这里插入图片描述

原因分析：每次点击触发点击事件时，都会开启一个新的函数执行空间
在这里插入图片描述
解决：将定时器存储在对象当中，这样可以在下一次开启的执行空间中将定时器获取到并清除。
在这里插入图片描述

最终代码：

<!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

每个属性的定时器执行到清除的时间不同，对动画结束时间进行判断，并采用回调函数对动画执行结束后进行处理。
在这里插入图片描述
代码：

<!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>

在这里插入图片描述

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

// 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)
    }
}

猜你喜欢

转载自blog.csdn.net/qq_43812504/article/details/112557836
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022