JS缓动动画，都是套路……

表捉急先看这几个知识点！

---

取整函数

函数名	功能
Math.ceil()	向上取整
Math.floor()	向下取整
Math.round()	四舍五入函数

<br />

js常用访问 CSS 属性

1. 点语法 box.style.width
2. 利用[]访问属性 box.style[“width”]
   优点：可以给属性传递参数

 function getStyle(obj, attr) {
        if (obj.currentStyle) { 
            // ie等
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];  
            // w3c 浏览器
        }
    }

<br />

JSON遍历

    var json = {width:200,height:300,left:50}
    for(var k in json)
    {
        console.log(k);   // 属性
        console.log(json[k]);  // 值（不带单位）
    }

---

<br />

1.0 匀速运动

匀速动动

<br />

1. 清除定时器，容易发疯啊哈哈

2. 速度设为15px,根据target与obj.offsetLeft的值来判断运动的方向，正右负左。

3. 然后就动一动。

4. 根据target和offsetLeft的差值，当差值绝对值小于15px时可以停止了
   问：为啥是15px?
   答：如果target=70,那么offsetLeft的值：0，15，30，45，60，75，90……
   等等！
   发现了嘛！吃了炫迈，等于70的时候没有，根本停不下来……

5. 既然停不下来，那么设定范围即为速度15~

6. 停止时设定obj.style.left = target 就可以咯

function animate(obj, target) {
            clearInterval(obj.timer);  // 清除定时器
            var speed = obj.offsetLeft < target ? 15 : -15;
            // 用来判断 应该 +  还是 -
            obj.timer = setInterval(function () {
                var result = target - obj.offsetLeft;
                // 因为他们的差值不会超过15
                obj.style.left = obj.offsetLeft + speed + "px";
                if (Math.abs(result) <= 15)
                // 如果差值不小于 15 说明到位置了
                {
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";
                    // 有15像素差距   我们直接跳转目标位置
                }
            }, 10)
        }

<br />

2. 缓速封装运动框架1.0

缓速动动

1. 基本原理同1

2. 速度越来越慢，所以使用公式(target - box.offsetLeft) / 10

3. 因为通过公式计算出的速度可能为浮点型，所以通过上下取整进行计算一下
   问：为什么是上下取整？
   答：最后的最后，速度可能为0.5，0.4……或者-0.5，-0.4……
   正负数，你懂的啊，0.5向下取整便0；-0.5当然要向上取整啊亲！
   不然又停不下来了，啊哈哈

<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var target = 400;
    var timer = null;
    btn.onclick = function () {
        timer = setInterval(function () {
            var step = (target - box.offsetLeft) / 10;
            step > 0 ? Math.ceil(step) : Math.floor(step);
            box.style.left = box.offsetLeft + step + "px";
        }, 30);
    }
</script>

发现了吗
只能向左右动，尴尬！
如何自由灵敏全方位无死角动起来？
→ biu~ biu~
→ 客官请看

<br />

2. 缓速封装运动框架2.0

缓速上下左右动动

1. 还记得js如何访问 CSS 属性不

2. 不记得就拉到上面look一下

3. 根据这个属性，对运动函数进行封装加入了attr，左右上下动起来

    // 封装单个属性的运动框架
    function animate(obj, attr, target) {  // 给谁、什么属性、改为多少
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var current = parseInt(getStyle(obj, attr));  
            // 得到当前的样式 去掉px
            var step = ( target - current ) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style[attr] = current + step + "px";
            if (current == target) {
                clearInterval(obj.timer);
            }
        }, 30)
    }

<br />

如何变得更加自由灵敏全方位无死角动起来？
→ biu~ biu~
→ 客官请看
→ 傲娇小JSON

<br />

3.缓速封装运动框架3.0

1. 在升级版中加入了回调函数，啦啦啦
   回调函数：等动画执行完毕执行（定时器停止时）。

2. 并添加透明度的变化

3. 第9行 || 0

function animate(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;
        for (var attr in json) {
            var current = 0;
            if (attr == "opacity") {
                // ie678中如果不能识别则为undefined，因此 || 0
                current = parseInt(getStyle(obj, attr) * 100)|| 0;
            }
            else {
                current = parseInt(getStyle(obj, attr));
            }
            var step = ( json[attr] - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (attr == "opacity") {
                if ("opacity" in obj.style) {
                    obj.style.opacity = (current + step) / 100;
                }
                else {
                    obj.style.filter = "alpha(opacity = " + (current + step) + ")";
                    console.log(current);
                }
            }
            else if (attr == "zIndex") {
                obj.style.zIndex = json[attr];
            }
            else {
                obj.style[attr] = current + step + "px";
            }

            if (current != json[attr]) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 5)
}
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return window.getComputedStyle(obj, null)[attr];
    }
}

发现了吗？套路！都是套路！
经过不断封装，函数逐渐变得完善~
更加方便使用