动画函数封装

一、动画函数初版：左右匀速移动目标距离

<script>
        //封装移动元素函数:任意一个元素(element)左右匀速移动目标距离(target)
        function animate(element,target){
            //先清理定时器
            clearInterval(element.timeId);
            element.timeId=setInterval(function(){
                //获取div的当前位置--数字类型,没有px
                var current=element.offsetLeft;
                //div每次移动多少像素
                var step=10;
                //判断当前位置和目标位置的大小
                step=current<target?step:-step;
                //每次移动后的距离
                current+=step;
                //判断当前移动后的位置是否到达目标位置
                if(Math.abs(target-current)>Math.abs(step)){
                    //目标位置和当前位置的距离大于步数,继续移动
                    element.style.left=current+"px";
                }else{
                    //目标位置和当前位置的距离大于步数,清除定时器
                    clearInterval(element.timeId);
                    //目标位置和当前位置的距离大于步数,直接移动到目标位置
                    element.style.left=target+"px";
                }
            },20);
        }
    </script>
    <!-- 测试 -->
    <input type="button" value="移动400" id="btn1">
    <input type="button" value="移动800" id="btn2">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
    <script>
        document.getElementById("btn1").onclick=function(){
            animate(document.getElementById("dv"),400);
        };
        document.getElementById("btn2").onclick=function(){
            animate(document.getElementById("dv"),800);
        };
    </script>

二、动画函数升级：左右缓动效果移动目标距离

<script>
    //封装移动元素函数:任意一个元素(element)左右缓动效果移动目标距离(target)
    function animate(element,target){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var current=element.offsetLeft;
            //利用这个可以制造缓动效果
            var step=(target-current)/10;
            //判断步数是否大于0,即是往左移动还是往右移动,大于0必须向上取整,不然永远到达不了目标值
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            element.style.left=current+"px";
            if(current==target){
                clearInterval(element.timeId);
            }
            //测试代码
            console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
        },20)
    }
    </script>
    <!-- 测试 -->
    <input type="button" value="移动400" id="btn1">
    <input type="button" value="移动800" id="btn2">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
    <script>
        document.getElementById("btn1").onclick=function(){
            animate(document.getElementById("dv"),400);
        };
        document.getElementById("btn2").onclick=function(){
            animate(document.getElementById("dv"),800);
        };
    </script>

三、如何获取获取任意一个元素的任意一个样式属性的值

<script>
    //获取任意一个元素的任意一个样式属性的值----->封装函数
    //参数element------->元素
    //参数attr------>元素的某个属性
    //注意:1.判断是否支持某属性,直接window.getComputedStyle?不用(),不支持返回的是undefined,即false
    //注意:2.访问对象属性的方法点语法或者中括号,此处用中括号["属性"]
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    </script>
   <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
   <script>
    //原因,如果在style里面有个left属性值(没有设置position的情况下),利用offset是0,获取不到这个值
    //所以可以使用下面两个属性:(支持不一样的浏览器)
    //1.getComputedStyle(element,null),返回一个对象
    var dv=document.getElementById("dv");
    console.log(window.getComputedStyle(dv,null));
    //2.element.currentStyle,返回一个对象
    console.log(dv.currentStyle);
   </script>

四、动画函数升级：增加一个任意的属性

<script>
    //封装动画函数:增加一个任意的属性----添加参数attr
    //参数element------->元素
    //参数attr------->属性(用双引号)
    //参数target------->目标值
    function animate(element,attr,target){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            //获取一个元素的任意属性,必须装换为整数,而且是parseInt()方法
            var current=parseInt(getStyle(element,attr));
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            //把current赋值给这个元素的值
            element.style[attr]=current+"px";
            if(current==target){
                clearInterval(element.timeId);
            }
            //测试代码:
            console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
        },20)
    }
    //获取一个元素的任意属性的封装函数
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    </script>
    <input type="button" value="动画" id="btn">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),"width",500)
        };
    </script>

五、动画函数升级：增加多个任意的属性

<script>
    //封装动画函数:增加多个任意的属性----使用json对象
    function animate(element,json){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            //遍历json对象
            for(var attr in json){
                //获取元素这个属性当前的值
                var current=parseInt(getStyle(element,attr));
                //当前的属性对应的目标值
                var target=json[attr];
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current+"px";
            }
            //判断是否全部达到目标,达到目标则清除定时器等于current==target
            if(current==target){
                clearInterval(element.timeId);
            }
            //测试代码
            console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.current[attr]; 
    }
    </script>
    <!-- 测试 -->
    <input type="button" value="动画" id="btn">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"width":200,"height":200,"top":100,"left":100});
        };
    </script>

六、动画函数升级：增加回调函数

<script>
    //封装动画函数:增加回调函数----fn参数
    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            for(var attr in json){
                var current=parseInt(getStyle(element,attr));
                var target=json[attr];
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current+"px";
                if(current==target){
                    clearInterval(element.timeId);
                    //前提,所有的属性都到达目标位置才能使用这个函数
                    if(fn){
                        fn();
                    }
                }
                //测试代码
                console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
            }
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
    }
    </script>
    <!-- 测试 -->
    <input type="button" value="动画" id="btn">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"top":100,"left":100},function(){
                animate(document.getElementById("dv"),{"width":200,"height":200,})
            });
        };
    </script>

七、动画函数升级最终版：增加层级和透明度

<script>
    //封装动画函数:增加层级和透明度-------json对象可以传入z-index和opacity
    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            for(var attr in json){
                //判断attr这个属性
                if(attr=="opacity"){//是opacity
                    //获取当前属性的透明度,并且放大100倍
                    var current=getStyle(element,attr)*100
                    //目标的透明度放大100倍
                    var target=json[attr]*100
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current+=step;
                    //变化后的透明度再缩小100倍
                    element.style[attr]=current/100;
                }else if(attr=="zIndex"){//是zIndex
                    element.style[attr]=json[attr];
                }else{//普通的属性
                    var current=parseInt(getStyle(element,attr));
                    var target=json[attr];
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current+=step;
                    element.style[attr]=current+"px";
                }
                if(current==target){
                    clearInterval(element.timeId);
                    if(fn){
                        fn();
                    }
                }
                //测试代码
                console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
            }
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
    }
    </script>
    <input type="button" value="动画" id="btn">
    <div id="dv" style=" 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"top":100,"left":100},function(){
                animate(document.getElementById("dv"),{"width":200,"height":200,},function(){
                    animate(document.getElementById("dv"),{"opacity":0.2},function(){
                        animate(document.getElementById("dv"),{"top":0,"left":0,"opacity":1,"zIndex":-1})
                    })
                });
            });
        };
    </script>