js中运动函数的封装及应用

最近在学习js的过程中，学习了运动函数的封装。

在日常学习工作中经常需要设置一些运动效果，此时就需要用到运动函数，提前封装好一个运动函数可以在需要做其他的效果的时候进行引用，极大提高了重用率，大大增加我们的效率。

下面将分为三个步骤展示 ：

一是运动 函数的封装，

二是编写一个小球运动效果，帮助对运动函数的理解，

最后编写一个稍复杂的烟花效果的页面，展示对封装的运动函数的应用。

首先，封装一个运动函数：

我们知道，运动三要素：谁运动（对象），属性，目标

emmm，算了，废话不多说，直接展示demo（思路逻辑都写在注释中，不再赘述）

        /*****封装一个运动函数*****/

        var times = '';

        function move(ele, target, way) {
            //事先清除一下定时器
            clearInterval(times);

            times = setInterval(function () {

                //先设置一个开关，定义初始值为true
                var onOff = true;

                //用for in 循环遍历运动的属性（方向、目标），即遍历（target）
                for (let attr in target) { //attr表示运动的属性

                    //获取元素运动到哪里了的实时值
                    //想要获取实时值，就要在外部封装一个获取实时位置的函数方法，然后再            
                      通过调用这个方法获取实时值并保存
                    let now = parseInt(getPos(ele, attr))

                    //计算此时速度的值（speed）
                    let speed = (target[attr] - now) / 10;

                    //取整数(向上向下取整)
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //设置一个开关的状态(true)用来表示元素运动到终点
                    if (now == target[attr]) {
                        onOff = true;
                    }

                    //让元素运动
                    ele.style[attr] = now + speed + 'px';
                }

                //判断开关的状态，如果到达终点则停止定时器
                for (var tip in target) {
                    if (target[tip] !== parseInt(getPos(ele, tip))) {
                        onOff = false;
                        break;
                    }
                }

                if (onOff) {
                    clearInterval(times);
                    way && way();
                }

            }, 30)
        }

利用封装好的运动函数进行小球的运动效果（此处只展示小球运动的代码，不再重复上述的运动函数的代码）

    
    
    
    
    




    


    开始

    

最后实现一个烟花效果

点击指定区域，会升起一个点（大烟花），然后随机到达一定高度便爆炸生成多个五颜六色（通过随机色实现）的小烟花

运行效果感兴趣的可以自行copy运行，有误之处欢迎大家指教交流~~~~3Q