Day15（JS动画，JS获取CSS属性，demo 导航缓动）

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)
    }