js封装一个缓动动画

js封装一个缓动动画，支持传入json数据格式进行多属性操作。
具体全部实现代码如下：

1、获取元素css样式属性值的方法

/**
 * 
 * @对象名称 {String} obj 
 * @CSS属性 {String} attr 
 */
function getStyleAttr (obj, attr) {
    if (obj.currentStyle) { // IE 和 opera
        return obj.currentStyle[attr];
    } else {
        return window.getComputedStyle(obj, null)[attr];
    }
},

2、封装缓动动画方法

/**
* 缓动动画
* @param {String} eleObj 
* @param {JSON} json 
* @param {Function} fn 
*/
function buffer (eleObj, json, fn) {
    // 1.1 定时器先清后设
    clearInterval(eleObj.timer);

    // 1.2 定义变量
    var speed = 0, begin = 0, target = 0, flag = false;

    // 1.3 设置定时器
    eleObj.timer = setInterval(function () {
        // 标志 (标签的所有属性有没有执行完动画)
        flag = true;
        for(var key in json){
            // 获取要做动画属性的初始值
            if(json.hasOwnProperty(key)) {
                // 对于透明度属性做特殊处理
                // opacity的值为 0~1
                if(key === 'opacity'){
                    // 调用获取元素CSS样式值的方法
                    begin = parseInt(getStyleAttr(eleObj, key) * 100) || 100;
                    target = parseInt(json[key]* 100);
                }else {
                    begin = parseInt(getStyleAttr(eleObj, key)) || 0;
                    target = parseInt(json[key]);
                }

                // 2.3 求出步长（缓动动画公式）
                speed = (target - begin) * 0.2;
                // 如果目标值大于开始值向上取整，否则向下取整
                speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

                // 2.4  动起来
                if(key === 'opacity'){
                    eleObj.style.opacity = (begin + speed) / 100;
                }else {
                    eleObj.style[key] = begin + speed + 'px';
                }

                // 2.5 判断（防止某一个属性到达指定值，其余属性就不会再做操作）
                if (begin !== target) {
                    flag = false;
                }
            }
        }

        // 1.4 清除定时器
        if(flag){
            clearInterval(eleObj.timer);
            // 开启另一组动画
            /* if(fn){
                    fn();
                }*/
            fn && fn();
        }
    }, 60);
}

以上思路写法来自网易云课堂【撩课-零基础玩转JavaScript】想要查看视频教程的童鞋可以自行去观看噢。