使用js實(shí)現(xiàn)的屬性動(dòng)畫框架:

• obj // 動(dòng)畫對象
• json //屬性表 {屬性名:動(dòng)畫結(jié)束值}
• callback // 動(dòng)畫結(jié)束后的回掉函數(shù)

function animation(obj,json,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;
        for (var style in json)  {
            var target = json[style];
            var objStyle;
            if (style === 'opacity') {
                objStyle = Math.round(getStyle(obj,style) * 100);
            }
            else {
                objStyle = parseInt(getStyle(obj,style));
            }
            if (objStyle != target) {
                flag = false;
            }
            var speed = (target - objStyle)/10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (style === 'opacity') {
                obj.style[style] = objStyle + speed;
            }
            else {
                obj.style[style] = objStyle + speed + 'px';
            }
            if (flag) {
                if (callback) {
                    callback();
                }
            }
        }
    },30)
}

function getStyle(obj,style) {
    if (obj.currentStyle) {
        return obj.currentStyle(style);
    }
    else {
        return getComputedStyle(obj,false)[style];
    }
}