JS動畫

動畫的原理
盒子自身的 offsetLeft + 步長；
封裝動畫
封裝勻速動畫：
Math.abs（）絕對值

通過JS獲取CSS

1. 通過點語法

box.style.width box.style.background
這個方法用的很多，但是，有缺陷
缺陷：點后面的width和background是沒法改變，第二沒法兒傳遞參數
Var w=width
Box .style.w

2. 利用 [ ] 獲取

Box.style[‘widht’];
這個的優點，可以傳遞參數
通過封裝，隨時傳遞參數來獲取，方便快捷
function attr(obj,attr){
console.log(obj.style[attr]);
}
attr(red,’left’)

得到我們的CSS樣式
比如我們前面獲取CSS樣式，是用box.style.left
但是，他們只能獲取 行內樣式
但是我們工作。更多用的是內嵌式或者外鏈式

那么，怎么才能得到內嵌式或者外鏈式
語法：
window.getComputedStyle(“元素”，“偽類”) [屬性] ； w3c標準寫法
這里面兩個參數都是必須的啊，如果沒有偽類，就用null代替
obj.currentStyle;
那么，有兼容性問題，就肯定有兼容性寫法
我們元素里面有很多屬性，例如left、width
那么，我們想要某個屬性，就傳入，并且返回某個屬性

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

for in 循環遍歷

for（變量 in 對象）{執行語句；}
我們可以用in來判斷JSON有沒有屬性，
For….in…..每循環一次，就會對數組元素或者對象進行一次操作，也稱為枚舉法
記住：
for(var k in json){
}
For in循環遍歷json后，k就是他的每一個屬性
那么，想要拿到值，是json[k]
也就是說，k并不是json的屬性值，只是屬性

<style>
        .red{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
            left: 0;
        }
        .pink{
            width: 300px;
            height: 300px;
            background: pink;
            position: relative;
            left: 0;
        }
</style>


<div class="red" id="red"></div>
<div class="pink" id="pink"></div>
<button id="btn1">red動起來</button>
<button id="btn2">pink動起來</button>

speed：步長
target：目標

最簡單的勻速動畫函數（只往右）

 function animate(obj,speed,target){
        obj.timer = setInterval(function(){
            if(obj.offsetLeft>target){
                clearInterval(obj.timer);
            }else{
                obj.style.left = obj.offsetLeft + speed + "px";
            }
        },50)
    }

最簡單的勻速動畫函數（可左可右）

function animate(obj,target){
        clearInterval(obj.timer);
        var speed = obj.offsetLeft - target < 0 ? 10 : -10;
        obj.timer = setInterval(function(){
            var run = target - obj.offsetLeft;
            if(Math.abs(run)<=10){
                clearInterval(obj.timer);
            }else{
                obj.style.left = obj.offsetLeft + speed +"px";
            }
        },30)
    }

最簡單的緩動動畫函數（可左可右）

function animate(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.offsetLeft)/10;
            console.log(speed);
            speed = speed>0?Math.ceil(speed) :Math.floor(speed);
            obj.style.left = obj.offsetLeft + speed +"px";
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
        },50)
    }

最簡單的緩動動畫函數（傳多個屬性 json）

function animate(obj,json){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            for(var attr in json){
                var cus = parseInt(getStyle(obj,attr));
                var speed = (json[attr] - cus) /10;
                speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
                if(cus == json[attr]){
                    clearInterval(obj.timer);
                }else{
                    obj.style[attr] = cus + speed + "px";
                }
            }
        },30)
    }

最簡單的緩動動畫函數（傳多個屬性 json + 回調函數）

 function animate(obj,json,fun){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var flag = true;
            for(var attr in json){
                var leader = parseInt(getStyle(obj,attr));
                var speed = (json[attr] - leader)/10;
                speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
                obj.style[attr] = leader + speed + "px";

                if(leader!=json[attr]){   //  只能比較數值，如果是字符串就跳過
                    flag = false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fun){
                    fun();
                }
            }
        },30)
    }

如何調用：

 btn1.onclick = function(){
        animate(pink,{left:400,top:400,width:300,height:300,borderRadius:1000},
            function(){
                animate(pink,{left:0,top:0,width:200,height:200,borderRadius:0})
            }
        );
    };

最簡單的緩動動畫函數（傳多個屬性 json + 回調函數 + 透明度 +z-index）

function animate(obj,json,fun){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var flag = true;
            for(var attr in json){
                var leader = 0;
                if(attr == "opacity"){
                    leader = parseInt(getStyle(obj,attr)*100);
                }else{
                    leader = parseInt(getStyle(obj,attr));
                }
                var speed = (json[attr] - leader)/10;
                speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
                if(attr == "opacity"){
                    obj.style.opacity = (leader + speed)/100;
                }else if(attr == "zIndex"){
                    obj.style.zIndex = json[attr];
                }else{
                    obj.style[attr] = leader + speed + "px";
                }
                if(leader!=json[attr]){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fun){
                    fun();
                }
            }
        },30)
    }

如何調用：

btn1.onclick = function(){
        animate(pink,{left:500,top:400,width:300,height:300,borderRadius:0,opacity:10,zIndex:10},
                function(){
                    animate(pink,{left:1200,top:0,width:200,height:200,borderRadius:1000,opacity:100,zIndex:5})
                }
        );
    };

demo 導航緩動圖片

<div class="box">
    <div class="nav">
        <span id="bg" class="bg"></span>
        <ul id="ul">
            <li><a href="javascript:">首頁新聞</a></li>
            <li><a href="javascript:">活動規則</a></li>
            <li><a href="javascript:">阿里巴巴</a></li>
            <li><a href="javascript:">騰訊新聞</a></li>
            <li><a href="javascript:">網站策劃</a></li>
            <li><a href="javascript:">公司簡介</a></li>
            <li><a href="javascript:">好好學習</a></li>
            <li><a href="javascript:">天天向上</a></li>
        </ul>
        <span id="span"></span>
    </div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{ color:#333;font-family:Helvetica,Microsoft YaHei;}
        .box{
            width: 100%;
            height: 100%;
            background:black;
        }
        .nav{
            width: 800px;
            margin: 0 auto;
            line-height: 42px;
            height: 42px;
            background: white;
            border-radius: 5px;
            position: relative;
            top: 100px;
            text-align: center;
        }
        .nav ul{
            list-style: none;
            height: 42px;
            float: left;
            position: absolute;
        }

        .nav:after{
            content: "";
            display: table;
            clear: both;
        }
        .nav ul li{
            float: left;
            width: 83px;
        }
        .nav ul li a{
            color: #333;
            font-size: 14px;
            text-decoration: none;
        }
        #span{
            background: url("images/rss.png");
            width: 32px;
            height: 32px;
            display: inline-block;
            float: right;
            margin: 5px;
        }
        .nav .bg{
            background: url("images/cloud.gif");
            position: absolute;
            left: 0;
            width: 83px;
            height: 42px;
        }
 </style>

<script>
    var ul = document.getElementById("ul");
    var bg = document.getElementById("bg");
    var ulis = ul.children;
    var timer = null;
    var leader = 0,target = 0,current = 0;

    for(var i=0;i<ulis.length;i++){
        ulis[i].onmouseover = function(){
            clearInterval(timer);
            target = this.offsetLeft;
            timer = setInterval(animate,20);
        };
        ulis[i].onclick = function(){
            current = this.offsetLeft;
        };
    }

    ul.onmouseout = function(){
        clearInterval(timer);
        target = current;
        timer = setInterval(animate,20);
    };

    function animate(){
        leader =leader + (target -leader)/10;
        bg.style.left = leader +"px";
    }

</script>