老夫当年手写的js动画库

前言

当年我学习js的时候，那时候学生时代不知道有jquery，所以手写了一些东西，留下的不多作为回忆。

正文

``` javascript
window.onload = function () {
        var oBox = document.getElementById('box');
        document.getElementById('btn').onclick = function () {
            animate(oBox, {"z-Index":999,"opacity": 0.2,"left":"300px","height":400})

        }
    }

    /*
     * json === {left : 400px,"opacity":0.3}
     *           key  json[key]
     *
     * */
    function animate(obj, json, callback) {
        //1.清空之前的定时器
        clearInterval(obj.timer);

        //启动定时器
        obj.timer = setInterval(function () {

            var flag = true
            for (var key in json) {
                // 步长 = （目标值-当前值）/10;
                var step = (parseInt(json[key]) - parseInt(getStyle(obj, key))) / 10;

                if (key == "opacity") {
                    step = (json[key] * 100 - getStyle(obj, "opacity") * 100) / 10;  // 0--10
                }

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                if (key == "z-Index") {
                    obj.style.zIndex = json[key];

                } else if (key == "opacity") {
                    // 没有带单位操作
                    //新的位置=当前的位置+ 步长；
                    obj.style.opacity = Number(getStyle(obj, "opacity")) + (step / 100);
                    if (Number(getStyle(obj, "opacity")) != Number(json[key])) {
                        flag = false;
                    }
                } else {
                    //新的位置    =    当前的位置       +          步长；
                    obj.style[key] = parseInt(getStyle(obj, key)) + step + "px";
                    if (parseInt(getStyle(obj, key)) != parseInt(json[key])) {
                        flag = false;
                    }
                }
            }

            //到达指定位置
            if (flag == true) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
        },40)
    }

    // px
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            //ie
            return obj.currentStyle[attr];
        }
        //goole
        return window.getComputedStyle(obj, null)[attr];
    }

简单介绍一下原理,其实就是动态修改一下某个属性。

然后说几个注意的地方。

1.一个是一个计时器的问题，因为如果一个计时器的话，那么肯定会出现问题，所以最好这个元素自带这个计时器。

2.第二个需要注意的问题，比如说你想从位置0到200，那么你如何保证一定能够到200呢？这里面因为如果和时间相除的话，会出现一个问题，就是可能出现小数，而位置是只能精确到两位小数的，那么问题就会出现。

因为找到的是第二个版本不是最终版，所以这里没有考虑完。

3.z-Index和opacity 比较特殊需要特别考虑，同样opacity 应该考虑到ie，上面不完全，有兴趣可以补一下。