运动函数终极用法

标题：运动函数终极版本

写一个内部样式表

<style>
        *{
            margin:0;
            padding:0;
        }
        .box1{
            height:100px;
            width:200px;
            position: absolute;
            background:#0f0;
        }
        .box2{
            height:100px;
            width:200px;
            position: absolute;
            background:#00f;
            left:0;
            top:100px;
        }
        .box3{
            width:200px;
            height:100px;
            position:absolute;
            left:0;
            top:200px;
            background:#f00;
        }

    </style>

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

    <script src="easing.js"></script>
    <script>
        //一、先获取元素
            var box1 = document.getElementsByTagName("div")[0];
            var box2 = document.getElementsByTagName("div")[1];
            var box3 = document.getElementsByTagName("div")[2];
            /* 思路:需要一个运动函数；
             */

            /* e二、 首先我们知道创建一个运动函数需要
                1.@move 函数，这个是用来让指定的元素开始动画
                2.@ele  表示进行动画的元素
                3.@attr 表示是哪一个css元素要进行运动
                4.@target 最终也就是最后css的最终属性值是多少
                5.@time 整体运动得时间*/

            //6.@callback 回调 
            //可写函数
            function move(ele, target, time, callback,eas){
                eas = eas || "easeInOutBounce"
                //我们先来定义一个对象nowjson，用来储存对应的初始值
                var nowJSON = {} ;

                //然后利用for..in..循环target
                for(var i in target){
                   // console.log(i);//此时查看i会得到target里每个属性名字
                    if(window.getComputedStyle){ //能力监测
                        //对象使用方括号语法读取对应的值
                        nowJSON[i] = parseInt(getComputedStyle(ele)[i]);
                    }
                }
               //console.log(nowJSON);//查看得出初始值

                 //然后在获取一个元素储存发生变化属性的变化量
                var distanceJSON = {};

                //还是利用foe循环target；
                for(var i in target){
                    //变化量等于总值target减去初始值nowJSON就可以了
                    distanceJSON[i] = (target[i] - nowJSON[i]);
                    console.log(i+"差量是"+distanceJSON[i] )
                }
                console.log(i+"差量是"+distanceJSON[i] )
                //console.log(distanceJSON)//查看得出变化差值

                //定义一个执行频率为每20毫秒执行一次，浏览器的最佳效果
                var interval = 20;
                //通过总时间time除以interval可以得到总次数
                var allcount = time/interval;

                //我们在定义一个计数器
                var count = 0;
                //创建一个定时器，给timer是为了下面清除定时器所写的
                var timer = setInterval(function(){
                    //累加次数
                    count++;
                    //我们通过for...in..循环target得到ele的样式
                    for(var i in target){
                        /* //修改一下样式 公式：初始值+单词步长（每次走的距离）*当前次数count
                        //因为opacity透明度没有px所以给它加个判定
                        if(i.toLowerCase() === "opacity"){
                        ele.style[i] = nowJSON[i] + distanceJSON[i]/allcount*count
                        }else{
                            ele.style[i] = nowJSON[i] + distanceJSON[i]/allcount*count + "px"
                        }*/

                        //easing是导入的一个对象 对象内有很多公式 可以实现不同的运动曲线
                        //ele.style[i] = easing[eas](x, t, b, c, d, s)
                        /*  t: current time,  当前时间
                            b: begInnIng value,  开始值
                            c: change In value,  结束值 - 开始值
                            d: duration 总消耗时间
                            x: 其实就是return的结果，传入0即可  */
                            if(i.toLowerCase() === "opacity"){
                                ele.style[i] = easing[eas](0, count * interval,nowJSON[i], distanceJSON[i],time ,) ;
                            }else{
                                ele.style[i] = easing[eas](0, count * interval,nowJSON[i], distanceJSON[i],time ,) + "px";
                            }
                    }
                    //既然定时了到了终点我们就要把它停下来，此时开始判定
                    if(count >= allcount){
                        //这时就要利用timer吧这个定时器给停下来
                        clearInterval(timer);
                        //我们上面已经修改了样式ele.style[i];然后在利用for..in..循环target
                        for(var i in target){
                            //我们让最终的target里面的值给我们修改过的ele.style
                            ele.style[i] = target[i] + "px";  
                        }
                        //短路语法
                        callback && callback();
                    } 
                    
                },interval);
            }
            /* 最后点击box1的时候 函数开始执行，此时需要给box1设置一个点击事件*/
            box1.onclick = function () {
                console.time();
                /* 三、 1.我们先上ele要进行动画的元素box1； 
                    3.然后写上css的元素width要进行运动；
                    最终属性值值与元素用冒号隔开width:500;最终值就是500
                     需要用大括号括起来；
                    4.写上整体的运动时间1000；
                    5.写一个调回函数
                    6.最后一个传的是easing.js里面的一个对象*/
                move(box1,{width:500 ,height:400,left:500,}, 1000, function () {
                    console.log("执行结束")
                    console.timeEnd();
                }, "easeInOutBack")//
               
            }
            box2.onclick = function () {
                console.time();
            move(box2,{width:500 ,height:400,top:0,opacity:0}, 1000, function () {
                    console.log("执行结束")
                    console.timeEnd();
                },"easeInOutBounce")
            }

            box3.onclick = function () {
                
            move(box3,{width:1000,height:50,top:400, opacity:.5}, 1000, function () {
                    console.log("执行结束")
                    
                },"easeInOutElastic")
            }
    </script>