媒介：实在js动画跟CSS－DOM连系的挺严密的，都是用js函数完成一段时刻内反复设置元素的款式就形成了动画，个中涉及到大批的用DOM猎取元素款式操纵，所以能够先看一下CSS－DOM那篇文章，此次总结一下js中的动画，这一篇是基础知识总结，只用到了setTimeout函数，另有两个定时器函数下篇文章总结，末了要完成一个纯js轮播图Demo，好的，黑喂狗

－－－－－－－－－－－－－－－－－－ 你瞅啥? －－－－－－－－－－－－－－－－－－－－－－－－－

1.一个Demo

起首想让一个元素挪动要先设置一个元素，假定我们如今有一标签：<p id="message">Hello World!!!</p>，我们能够在js代码中设置它的初始位置：position:absolute,设置它间隔left和right的间隔，以下代码

        function positionMessage(){
        //检测与推断
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        //猎取元素的标签
        var elem = document.getElementById("message");
        //设置元素的位置
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
    }

接下来我们引见一个耽误实行函数，setTimeout(),它接收两个参数，第一个参数时字符串，内容是将要实行的谁人函数名字；第二个参数是一个数值，以毫秒为单元设定须要经由多长时刻后才最先实行第一个参数内里的函数。所以有个这个函数，我们能够写一个不停转变位置的函数moveMessage(),然后把它传递给setTimeout()函数。以下代码：

    function moveMessage(){
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        var elem = document.getElementById("message");
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        if(xpos ==200&&ypos == 100){
            return true;
        }
        if(xpos  < 200){
            xpos++;
        }
        if(xpos > 200){
            xpos--;
        }
        if(ypos < 100){
            ypos++;
        }
        if(ypos > 100){
            ypos--;
        }
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        movement = setTimeout("moveMessage()",10);
    }

1.起首猎取原始的left和position值，由于涉及到许多盘算，所以将字符串转换为数。
2.举行一些推断，将目的位置设置在left在200px，top稳定，也就是将其向右程度挪动。然后举行逻辑推断：假如抵达目的位置，就返回true，函数实行终了。
3.假如没有抵达位置，则不停将数值加1，假如凌驾设定位置则减1.
4.末了在moveMessage()函数内部设置setTimeout()函数，即在moveMessage()函数一次实行完毕后，就每隔10毫秒再次挪用这个函数，即在刚最先每隔10毫秒向右挪动1px，直到抵达设定所在函数return true完毕全部函数。

末了要在页面加载完成后挪用这个函数，所以要用到老朋侪addLoadEvent()函数，以下代码：

    function　addLoadEvent(func){
        var oldonload = window.onload;
        if(typeof window.onoad != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func(); 
            }
        }
    }

末了在页面加载完成时实行moveMessage()函数：

    addLoadEvent(PositionMessage);

2.笼统

适才建立的moveMessage()函数中有许多信息都是硬编码在函数中，这个函数的灵活性和适用范围就小，所以将一些详细的东西笼统出来，则这个函数就越发便于复用。
如今我们建立一个moveElement()函数,看下面代码：

       //起首为这个函数传进几个参数
        //@elementID:盘算挪动的元素的ID
        //@final_x:该元素目的地距左侧的位置
        //@final_y:该元素目的地距上边的位置
        //@interval:该元素两次挪动之间的停留时刻
        function moveElement(elementID,final_x,final_y,interval){
            //举行检测和推断
            if(!document.getElementById){
                return false;
            }
            if(!document.getElementById(elementID)){
                return false;
            }
            var elem = document.getElementById(elementID);  //参数没有引号
            var xpos =parseInt(elem.style.left);
            var ypos = parseInt(elem.style.top);
            if(xpos == final_x && ypos == final_y){
                return true;
            } 
            if(xpos  < final_x){
                xpos++;
            }
            if(xpos > final_x){
                xpos--;
            }
            if(ypos < final_y){
                ypos++;
            }
            if(ypos > final_y){
                ypos--;
            }
            elem.style.left = xpos + "px";
            elem.style.top = ypos + "px";
            //由于此次moveElement()函数是带参数的，所以再次挪用这个函数要写成下面一行。
            //movement = setTimeout("moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")",10);
            //然则这么写不简约，所以能够复制给一个变量
            var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
            movement = setTimeout(repeat,interval);
        }

直到如今我终究邃晓为何要做一次推断减减了，由于笼统以后，能够传入的参数会让元素向相反的方向挪动，如许就写能够让函数不管向哪一个方向挪动都能够了。

笼统以后，能够在positionMessage的末了直接挪用moveElement函数，以下代码：

        function positionMessage(){
        //检测与推断
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        //猎取元素的标签
        var elem = document.getElementById("message");
        //设置元素的位置
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
        
        //挪用挪动函数,能够随便转变值，以完成不必的动画结果
        moveElement("message",200,100,10);
    }

3.另一个笼统

//函数animation传入四个参数，
//@ele:要举行动画的DOM对象
//@attr:要转变的属性
//@ from ， to 属性值从哪一个值到哪一个值

var animation = function(ele, attr, from, to){
    var distance = Math.abs(to - from);
    var stepLength = distance/100;
    var sign = (to - from)/distance;  //代表方向
    var offset = 0;
    //step函数是每触发的时刻转变一下属性值
    var step = function(){
        var temOffset = offset + stepLength;
        if(temOffset < distance){
            ele.style[attr] = from + temOffset*sign + 'px';
            offset = temOffset;
        }else{
            ele.style[attr] = to + 'px';
            clearInterval(intervalID);
        }
    }
    ele.style[attr] = from + 'px';
    
    //先挪用定时器，每10毫秒触发一次step函数
    var intervalID = setTimeout(step,10);
}

以上是网易前端微专业先生给出的笼统代码，还引见了别的两个函数，将在下一篇中引见。
别的，完全源代码中没用这个笼统函数。

4.完全源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>example</title>

</head>

<body>
    <p id="message">Hello World!!!</p>

    <script>
        function positionMessage(){
            if(!document.getElementById){
                return false;
            }
            if(!document.getElementById("message")){
                return false;
            }
            var elem = document.getElementById("message");
            elem.style.position = "absolute";
            elem.style.left = "50px";
            elem.style.top = "100px";
            moveElement("message",125,25,20);

        }

        function moveElement(elementID,final_x,final_y,interval){
            if(!document.getElementById){
                return false;
            }
            if(!document.getElementById(elementID)){
                return false;
            }
            var elem = document.getElementById(elementID);
            var xpos =parseInt(elem.style.left);
            var ypos = parseInt(elem.style.top);
            if(xpos == final_x && ypos == final_y){
                return true;
            } 
            if(xpos  < final_x){
                xpos++;
            }
            if(xpos > final_x){
                xpos--;
            }
            if(ypos < final_y){
                ypos++;
            }
            if(ypos > final_y){
                ypos--;
            }
            elem.style.left = xpos + "px";
            elem.style.top = ypos + "px";
            var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
            movement = setTimeout(repeat,interval);
        }

        //页面加载函数
        function addLoadEvent(func){
            var oldonload = window.onload;
            if(typeof window.onload != 'function'){
                window.onload = func;
            }else{
                window.onload = function(){
                    oldonload();
                    func();
                }
            }
        }

        //页面加载时实行这个函数
        addLoadEvent(positionMessage);

    </script>
</body>

</html>