【学习笔记54】运动函数的分析

最新推荐文章于 2024-05-31 09:42:54 发布
最新推荐文章于 2024-05-31 09:42:54 发布
阅读量405 收藏
点赞数
分类专栏： JavaScript 文章标签： 学习 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128078138
版权

一、运动函数的基本实现

  • 运动函数是我们自己封装的一个函数。
  • 作用是将css样式的改变不是一次性完成，是逐步完成执行效果，看上去像是动画/运动完成的css样式改变。
  • 实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。

1、HTML和CSS代码

    <div class="box1"></div>
    <div class="box2"></div>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 100;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 200px;
            left: 0;
        }
    </style>

3、代码的实现

        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        oDiv1.onclick = function () {
            // 定义变量 用与步长的累加
            let count = 0;

            // 定时器的this指向是window 改变this指向
            const that = this;

            // 定时器
            const timer = setInterval(function () {
                count += 5;
                that.style.left = count + 'px';

                // 清除定时器
                if (count == 100) {
                    clearInterval(timer);
                }
            }, 50)
        }

        
        oDiv2.onclick = function () {
            // 定义变量 用与步长的累加
            let count = 0;

            // 定时器的this指向是window 改变this指向
            const that = this;

            // 定时器
            const timer = setInterval(function () {
                count += 5;
                that.style.left = count + 'px';

                // 清除定时器
                if (count == 100) {
                    clearInterval(timer);
                }
            }, 50)
        }

二、封装函数

        // 封装函数
        function move(element, type, target) {
            /**
             *  @param      element      移动的标签对象
             *  @param      type         标签属性属性
             *  @param      target       移动的目标距离
            */
            // 定义变量 用与步长的累加
            let count = 0;

            // 定时器
            const timer = setInterval(function () {
                
                count += 5;
                
                element.style[type] = count + 'px';

                // 清除定时器
                if (count == target) {
                    clearInterval(timer);
                }
            }, 50)
        }

        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, 'left', 200)
        })
   
        oDiv2.addEventListener('click', function () {
            move(oDiv2, 'left', 400)
        })

三、代码优化

（一）优化一

  1. 问题: 每次运动都从0的位置开始移动
  2. 原因: 运动函数的 初始值, 是从0开始的
  3. 解决: 获取到元素本身值, 然后再次基础上移动

在这里插入图片描述

        // 封装函数
        function move(element, type, target) {
            /**
             *  @param      element      移动的标签对象
             *  @param      type         标签属性属性
             *  @param      target       移动的目标距离
            */
            // 定义变量 用与步长的累加
            let count = parseInt(window.getComputedStyle(element)[type]);
            console.log(count );
            // 定时器
            const timer = setInterval(function () {
                
                count += 5;
                
                element.style[type] = count + 'px';

                // 清除定时器
                if (count == target) {
                    clearInterval(timer);
                }
            }, 50)
        }

        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, 'left', 200)
        })
   
        oDiv2.addEventListener('click', function () {
            move(oDiv2, 'top', 400)
        })

在这里插入图片描述

（二）优化二

1、问题: 从200移动到501时, 不会停止
在这里插入图片描述

2、原因: 移动距离, 不是每次移动的整倍数；移动距离301(501-200)，是每次运动的整倍数

3、解决
在这里插入图片描述

4、代码实现

        // 封装函数
        function move(element, type, target) {
            /**
             *  @param      element      移动的标签对象
             *  @param      type         标签属性属性
             *  @param      target       移动的目标距离
            */

            // 定时器
            const timer = setInterval(function () {
                // 获取当前的位置
                let count = parseInt(window.getComputedStyle(element)[type]);

                // 计算要移动的距离 (目标 - 当前的值) / 10
                let des = (target - count) / 10;

                // 判断是否需要继续移动
                if (target === count) {
                    // 此时说明移动到了, 可以结束定时器
                    clearInterval(timer);
                } else {
                    // 此时说明还没有移动到, 需要继续移动
                    element.style[type] = count + des + 'px';
                }
            }, 20)
        }

        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, 'left', 501)
        })

        oDiv2.addEventListener('click', function () {
            move(oDiv2, 'left', 100)
        })

（三）优化三

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

        // 封装函数
        function move(element, type, target) {
            /**
             *  @param      element      移动的标签对象
             *  @param      type         标签属性属性
             *  @param      target       移动的目标距离
            */

            // 定时器
            const timer = setInterval(function () {
                // 获取当前的位置
                let count = parseInt(window.getComputedStyle(element)[type]);

                // 计算要移动的距离 (目标 - 当前的值) / 10
                let des = (target - count) / 10;

                // 大于0向上取整 小于0向下取整
                des = des > 0 ? Math.ceil(des) : Math.floor(des);
                
                // 判断是否需要继续移动
                if (target === count) {

                    // 此时说明移动到了, 可以结束定时器
                    clearInterval(timer);
                } else {

                    // 此时说明还没有移动到, 需要继续移动
                    element.style[type] = count + des + 'px';
                }
            }, 20)
        }

        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, 'left', 0)
        })

        oDiv2.addEventListener('click', function () {
            move(oDiv2, 'left', 200)
        })

在这里插入图片描述

四、兼容透明度

        /**
         *  问题: 透明没有调整
         * 
         *  原因: 透明度没有单位
         * 
         *  解决: 在赋值的时候, 判断如果时透明度, 那么就别带单位
         * 
         *  新问题: 没有运动过程
         * 
         *  原因: 因为做了取整之后, 得到的值, 只会是 -1或者1
         * 
         *  解决: 想个办法, 将值放大
        */

            // 封装函数
            function move(element, type, target) {
            // 透明度 0.1 --> 1
            if(type === 'opacity') target *= 100;
            // target === 100

            let timer = setInterval(function(){
                // 获取当前位置的值  兼容透明度
                let count = type == 'opacity' ? window.getComputedStyle(element)[type]*100 : parseInt(window.getComputedStyle(element)[type]);
                // count === 0.1 * 100 === 10
                // 计算要移动的距离
                let des = (target - count) / 10;
                // destination == (target - count) / 10 === (100 - 10) / 10  === 9
                des = des > 0 ? Math.ceil(des) : Math.floor(des);
                // destination === 9
                // 清除定时器
                if(des === count){
                    
                    clearInterval(timer);
                }else{
                    
                    if(type === 'opacity'){
                        // (count + destination) / 100  === (10 + 9) / 100  === 19 / 100    === 0.19
                        element.style[type] = (count + des) / 100;
                    }else{
                        element.style[type] = count + des + 'px';
                    }
                }
            })
        }

        // 获取标签对象
        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');
        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, 'opacity', 1)
        })

        oDiv2.addEventListener('click', function () {
            move(oDiv2, 'left', 200)
            move(oDiv2, 'opacity', 1)
        })

在这里插入图片描述

五、有多个属性时

  1. 问题：开启多个属性运动时，需要调用多次
  2. 原因：参数是固定的
  3. 解决：多个参数（功能还是单一），通过传递对象的形式

在这里插入图片描述

        // 封装函数
        // function move(element, type, target) {
        function move(element, object) {
            for(let key in object){
                let type = key;
                let target = object[key];

                if(type === 'opacity') target *= 100;

                let timer = setInterval(function(){
                    // 获取当前位置的值  兼容透明度
                    let count = type == 'opacity' ? window.getComputedStyle(element)[type]*100 : parseInt(window.getComputedStyle(element)[type]);
                        
                    // 计算要移动的距离(目标 - 当前的值) / 10;
                    let des = (target - count) / 10;
                    // 大于0向上取整 小于0向下取整
                    des = des > 0 ? Math.ceil(des) : Math.floor(des);

                    // 判断是否需要继续移动
                    if(des === count){
                        // 此时说明移动到了 可以结束定时器了
                        clearInterval(timer);
                    }else{
                        // 此时说明还没有移动到, 需要继续移动
                        // 兼容透明度
                        if(type === 'opacity'){

                            element.style[type] = (count + des) / 100;
                        }else{
                            
                            element.style[type] = count + des + 'px';
                        }
                    }
                })
            }
        }

        // 获取标签对象
        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, {
                opacity:0.3,
            })
        })

        oDiv2.addEventListener('click', function () {
            move(this,{
                left:200,
                opacity:1,
                width: 200
            })
        })

在这里插入图片描述

六、运动函数真正结束

  1. 问题：没有办法完全捕获到运动函数的真正结束
  2. 原因：对象的每个属性，都会开启一个循环，每一个循环都会开启一个定时器，每个运动结束，就会结束一个定时器
  3. 解决：使用一个变最去记录，初始值可以给0，每次开启定时器的时候让变量自增，然后每次结束定时器的时候让变量自减

在这里插入图片描述

// 定义变量 存储数据
let num = 0;

// 封装函数
// function move(element, type, target) {
function move(element, object, fn = () => {}) {
    for(let key in object){
        let type = key;
        let target = object[key];

        if(type === 'opacity') target *= 100;

        // 开启定时器 让变量自增 记录一下开启运动
        num++;

        let timer = setInterval(function(){
            // 获取当前位置的值  兼容透明度
            let count = type == 'opacity' ? window.getComputedStyle(element)[type]*100 : parseInt(window.getComputedStyle(element)[type]);
                
            // 计算要移动的距离(目标 - 当前的值) / 10;
            let des = (target - count) / 10;
            // 大于0向上取整 小于0向下取整
            des = des > 0 ? Math.ceil(des) : Math.floor(des);

            // 判断是否需要继续移动
            if(target === count){
                // 定时器结束 变量--
                num--;
                if(num === 0){
                    console.log('函数结束了');
                }

                // 此时说明移动到了 可以结束定时器了
                clearInterval(timer);
            }else{
                // 此时说明还没有移动到, 需要继续移动
                // 兼容透明度
                if(type === 'opacity'){

                    element.style[type] = (count + des) / 100;
                }else{
                    
                    element.style[type] = count + des + 'px';
                }
            }
        })
    }
}


// 获取标签对象
const oDiv1 = document.querySelector('.box1');
const oDiv2 = document.querySelector('.box2');

// 调用函数
oDiv1.addEventListener('click', function () {
    move(oDiv1, {
        opacity:0.3,
    })
})

oDiv2.addEventListener('click', function () {
    move(this,{
        left:200,
        width: 200,
        opacity: 1
    })
})

在这里插入图片描述

七、回调函数

  1. 问题：我们现在想在运动函数结束之后做某些事，但是目前没法做到
  2. 原因：运动函数是异步的，所以会先执行同步代码
  3. 解决：在运动函数开始的时候，给他一个“锦囊”然后合诉运动函数，在运动完了的时候，才能打开“锦囊”

回调函数

  • 回调函数（本质上就是一个函数），将函数A以实参的形式传递给函数B，然后函数B在函数内部以形参的方式调用函数A，此时函数A可以称为函数B的回调函数
  • 回调函数一般用于异步代码的封装
        // 定义变量 存储数据
        let num = 0;

        // 封装函数
        // function move(element, type, target) {
        function move(element, object, fn = () => {}) {
            for(let key in object){
                let type = key;
                let target = object[key];

                if(type === 'opacity') target *= 100;

                // 开启定时器 让变量自增 记录一下开启运动
                num++;

                let timer = setInterval(function(){
                    // 获取当前位置的值  兼容透明度
                    let count = type == 'opacity' ? window.getComputedStyle(element)[type]*100 : parseInt(window.getComputedStyle(element)[type]);
                        
                    // 计算要移动的距离(目标 - 当前的值) / 10;
                    let des = (target - count) / 10;
                    // 大于0向上取整 小于0向下取整
                    des = des > 0 ? Math.ceil(des) : Math.floor(des);

                    // 判断是否需要继续移动
                    if(target === count){
                        // 定时器结束 变量--
                        num--;
                        if(num === 0){
                            // 调用回调函数
                            fn()
                            console.log(num)
                        }

                        // 此时说明移动到了 可以结束定时器了
                        clearInterval(timer);
                    }else{
                        // 此时说明还没有移动到, 需要继续移动
                        // 兼容透明度
                        if(type === 'opacity'){

                            element.style[type] = (count + des) / 100;
                        }else{
                            
                            element.style[type] = count + des + 'px';
                        }
                    }
                })
            }
        }


        // 获取标签对象
        const oDiv1 = document.querySelector('.box1');
        const oDiv2 = document.querySelector('.box2');

        // 调用函数
        oDiv1.addEventListener('click', function () {
            move(oDiv1, {
                opacity:0.3,
            })
        })

        oDiv2.addEventListener('click', function () {
            move(this,{
                left:200,
                width: 200,
                opacity: 1
            },() =>{
                console.log('运动结束，背景色改为royalblue');
                this.style.backgroundColor = 'royalblue';
            })
        })

在这里插入图片描述

0yizhiyang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python学习笔记之自定义函数用法详解
12-26
本文实例讲述了Python学习笔记之自定义函数用法。分享给大家供大家参考，具体如下： 函数能提高应用的模块性，和代码的重复利用率。Python提供了许多内建函数，比如print()等。也可以创建用户自定义函数。 函数定义 函数定义的简单规则： 函数代码块以def关键词开头，后接函数标识符名称和圆括号()，任何传入参数和自变量必须放在圆括号中间 函数内容以冒号起始，并且缩进 若有返回值，Return[expression] 结束函数；不带return 表达式相当于返回None 函数通常使用三个单引号  '''...'''   来注释说明函数；函数体内容不可为空，可用 pass 来表示
【机械臂】基于UR机械臂的运动学函数
weixin_43259286的博客
10-14 575
ur_kinematics_usr.h #include <tf/transform_broadcaster.h> #include <geometry_msgs/Pose.h> #include <Eigen/Core> #include <Eigen/Geometry> // -----------------------------------------------------------------------------------------
运动函数（一）
乐夫天命兮的博客
05-14 1116
function move(obj,attr,target,time,step){ //取消定时器 if(obj.timer){ clearInterval(obj.timer); } //给形参赋默认值 if(!time){ time=10 } if(!step){ if(attr=="opacity"){ step=1/100; ...
JavaScript运动函数
qq_45799465的博客
02-07 800
运动函数是我们自己封装的一个函数。 作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变。 实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。 运动函数部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp..
运动函数！
weixin_54447214的博客
09-07 178
运动函数前言一、第一版二、第二版三、最终版四、 js运行代码 前言 自定义运动函数，让定制的盒子非匀速的运动，纯js编写，练练思维 提示：以下是本篇文章正文内容，下面案例可供参考 一、第一版 function move(el, type, target) { const timer = setInterval(function () { // 当前位置 let current = parseInt(window.
运动函数
weixin_39583421的博客
08-11 695
运动函数 var ani = ele.animate([keyframes],{options}); keyframes: 一个对象，代表关键帧的集合； options:【可选参数】代表动画持续时间的整形数字（以毫秒为单位），或者一个包含一个或多个时间属性的对象。 属性： ...
JS里面的两种运动函数
auan7983的博客
11-20 187
最新学了一个新的运动函数，与最初学习的有所不同，第一个运动是根据运动速度完成运动，第二个则是根据运动的时间来完成运动，而且把之前的函数都进行了一些兼容处理，在这里列出了看一下： 第一种animate1 1 function animate1(obj,data,rate,fn){//运动对象，运动数据，[运动速度]，[回调函数] 2 //遍历获取样式属性 3...
运动函数（二）
乐夫天命兮的博客
05-14 239
function move(obj,attr,target,time,step){ //取消定时器 if(obj.timer){ clearInterval(obj.timer); } //给形参赋默认值 if(!time){ time=10 } if(!step){ step =10; } //console.log(step);...
python学习笔记（八）函数相关
12-21
文章目录函数相关递归函数生成器生成器方式1：将列表生成式的[]换成()即可生成器方式2：在函数中使用yield关键字迭代器可迭代对象高级函数map函数filter函数reduce函数 递归函数 定义：在函数内部调用自己的函数称为...
JavaScript学习笔记之JS函数
11-27
函数就是包裹在花括号中的代码块，前面使用了关键词function： 复制代码 代码如下: function functionName() {  这里是要执行的代码 } 函数参数 　函数的参数可以任意多个，不用声明变量类型，只用给出变量名： ...
JavaScript学习笔记之惰性函数示例详解
12-11
本文主要给大家介绍了关于JavaScript惰性函数的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 需求 我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意是首次...
JavaScript学习笔记（二十）——运动函数
qq_45268602的博客
09-07 497
运动函数初级版 <!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> *{
js-运动函数(盒子运动)
AsaZyf的博客
06-14 563
注意move的js包在另一篇文章&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="move.js"&amp
js-运动函数包
AsaZyf的博客
06-14 285
function move(obj, attr, dir, target, endFn) { clearInterval(obj.timer) //  避免全局变量，所以要用oBox.timer dir = parseInt(getStyle(obj, attr)) &lt; target ? dir : -dir obj.timer = setInterval(function() { ...
JS缓冲运动函数
博客
01-22 564
该运动框架适用于链式运动，完美运动。同时对元素opacity的改变也可以完美实现//获取样式函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else { return getComputed
封装的运动函数 doMove
ee_Andy的博客
09-12 427
封装好的运动函数 doMove function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = pa
学习整理 docker
最新发布
wonder_dog的博客
05-31 116
nexus。
sigprocmask()函数学习笔记
06-07
下面是关于 `sigprocmask()` 函数的一些学习笔记： 1. `sigprocmask()` 函数的头文件为 `<signal.h>`。 2. `sigprocmask()` 函数的原型为： ``` int sigprocmask(int how, const sigset_t *set, sigset_t *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值