缓动动画框架封装

一：基础动画框架封装

目标：让一个盒子速度递减移动到目标位置

思想：（1）: 通过（target  -  ele.offset）/10实现步长递减效果；

代码：

首先先获取事件源：

var btn = document.getElementsByTagName("button")[0];

var div = document.getElementsByTagName("div")[0]; 

function animate(ele,target){
clearInterval(ele.timer);
     ele.timer  = setInterval(function(){
     var step = (target - ele.offsetLeft)/10;
     step = step>0Math.ceil(step):Math.floor(step);//step去除bug
     ele.style.left = ele.offsetLeft + step + "px";
       if(Math.abs(target - ele.offsetLeft)<=Math.abs(step)){//判断步长去除bug
         ele.style.left = target + "px";
         clearInterval(ele.timer);
        }
      },10);         
}             

 

 

 

二：动画框架封装（回调函数）

目标：实现了简单的缓动效果，但是参数只有两个 如何实现多参呢？

思想：（1）：利用回调函数的思想

　　　（2）：利用json数组的遍历

　　　（3）：需要获取元素的样式【这里获取元素样式的方法使用了兼容ie 6，7，8的写法 】

代码：

[1]样式和获取事件源

//css代码
<style>
        div {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>
//html代码
    <button>运动到400然后回来</button>
    <div></div>
//js代码
        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

[2]:兼容性获取元素样式

       function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }    

[3]：封装缓动动画

        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }

[4]:调用函数

        btnArr[0].onclick = function () {
        var json1 = {"left":300,"top":200,"width":300,"height":200,"border-radius": 100};
            var json2 = {"left":10,"top":30,"width":100,"height":100};
            animate(div,json1, function () {
                animate(div,json2, function () {
                    animate(div,json1);//这里博主用两个回调可以实现双层效果
                });
            });

        }

三：动画框架封装【透明度】

目标:前边我们利用遍历json实现多参封装，添加透明度属性

思想：(1)opacity: 0.5 //取值范围 0 - 1 ；  filter:alpha(opacity = 50); IE[6,7,8] //取值范围 0 - 100

　　　(2)添加判断条件 如果判断属性为 opacity 特殊对待

代码：

*getStyle等上文含有的方法下面不再书写

[1]获取事件源

        btnArr[0].onclick = function () {
            var json1 = {"left":300,"top":200,"width":300,"height":200,"opacity": 30};
            animate(div,json1);
        }

[2]事件

function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader;
                    //判断如果属性为opacity的时候特殊获取值
                    if(k === "opacity"){
                        leader = getStyle(ele,k)*100 || 1;
                    }else{
                        leader = parseInt(getStyle(ele,k)) || 0;
                    }

                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    //特殊情况特殊赋值
                    if(k === "opacity"){
                        ele.style[k] = leader/100;
                        //兼容IE678
                        ele.style.filter = "alpha(opacity="+leader+")";
                    }else{
                        ele.style[k] = leader + "px";
                    }
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }

四：动画框架封装【层级】

目标：实现了前面的效果 但是层级属性也是和上文中实现的属性有不同的

思想：(1):因为个人需求，所以判断是层级属性那么直接赋值

代码：

[1]事件源：

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json1 = {"left":300,"top":200,"width":300,"height":200,"opacity": 30,"zIndex": 1};
            animate(div,json1);
        }

[2]书写方法：

        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader;
                    //判断如果属性为opacity的时候特殊获取值
                    if(k === "opacity"){
                        leader = getStyle(ele,k)*100 || 1;
                    }else{
                        leader = parseInt(getStyle(ele,k)) || 0;
                    }

                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    //特殊情况特殊赋值
                    if(k === "opacity"){
                        ele.style[k] = leader/100;
                        //兼容IE678
                        ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级，一次行赋值成功，不需要缓动赋值
                        //为什么？需求！
                    }else if(k === "zIndex"){
                        ele.style.zIndex = json[k];
                    }else{
                        ele.style[k] = leader + "px";
                    }
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

              
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }

 

效果展示：