JS动画代码

/*

 * 动画类

 * elem 动画dom对象

 * prop 目标样式集合

 * duration 总用时长

 * callback 回调函数

 * 原生JS

 */

var Animation = function(elem, prop, duration, callback){

    if(!elem || elem.nodeType != 1) return;

    this.elem = elem;

    this.duration = duration;

    this.callback = callback && typeof callback == 'function' ? callback : function(){};

    this.interval = 13;

    this.timer = null;

    this.propStyle = {};

    this.curStyle = {};

    this.initStyle(elem, prop);

}

Animation.prototype = {

    /*

     * 格式化动画两极样式

     * elem 动画dom对象

     * prop 目标样式集合

     * return this.curStyle:初始样式集合    this.propStyle:目标样式集合

     * 支持opacity/width/height/left/top/marginLeft...等,单位px

     */

    initStyle: function(elem, prop){

        var isIE = /*@cc_on!@*/!1;

        var currentStyle = elem.currentStyle || window.getComputedStyle(elem, null);    //当前对象样式集合，包括css及style内样式

        for(var o in prop){

            var curVal = o=='opacity' && isIE ? currentStyle['filter'] : currentStyle[o];

            if(o=='opacity' && isIE){

                var match = curVal.match(/opacity=(\d+)/i);

                curVal = match ? parseFloat(match[1]) / 100 : 1;

            }else{

                curVal = parseFloat(curVal);

            }

            if(typeof curVal == 'number'){

                this.curStyle[o] = curVal;

                //this.propStyle[o] = curVal + parseFloat(prop[o]);

                this.propStyle[o] = parseFloat(prop[o]);

            }

        }

    },

    /*

     * 执行函数

     * 13ms为一帧 this.interval = 13

     */

    run: function(){

        var queue = parseInt(this.elem.getAttribute('animating')) || 0;

        this.elem.setAttribute('animating', queue + 1);

        this.startTime = this.now();

        this.timer = setInterval(this.tick.bind(this), this.interval);

    },

    /*

     * 结束动画并执行回调函数

     */

    stop: function(){

        clearInterval(this.timer);

        this.timer = null;

        var elem = this.elem;

        var queue = parseInt(elem.getAttribute('animating')) || 0;

        if(queue <= 1){

            elem.removeAttribute('animating');

        }else{

            elem.setAttribute('animating', queue - 1);

        }

        this.callback.call(elem);

        

    },

    /*

     * 返回对象当前动画数

     */

    queue: function(){

        return parseInt(this.elem.getAttribute('animating')) || 0;

    },

    /*

     * 进度计算

     * percent为当前进度，1时结束动画

     */

    tick: function(){

        var currentTime = this.now(),

            remaining = Math.max( 0, this.startTime + this.duration - currentTime ),    //剩余时间

            temp = remaining / this.duration || 0,    //剩余时间所占比例

            percent = 1- temp;    //当前进度

        if(percent <= 1){

            this.tweens(percent);

        }else{

            this.stop();

        }

    },

    /*

     * 动画

     */

    tweens: function(percent){

        var isIE = /*@cc_on!@*/!1;

        var style = this.elem.style;

        for(var o in this.propStyle){

            var start = this.curStyle[o],

                end = this.propStyle[o];

            var now = start + ((end - start) * percent); //计算当前值

            if(o == 'opacity'){

                if(isIE){

                    style.filter = 'alpha(opacity='+ parseInt(now * 100) +')';

                }else{

                    style.opacity = now;

                }

            }else{

                style[o] = now + 'px';

            }

        }

        if(percent == 1){

            this.stop();

        }

    },

    /*

     * 返回当前时间戳

     */

    now: function(){

        return ( new Date() ).getTime();

    }

}

var anim = new Animation(elem, {'height': 0}, 3000, function(){});

anim.run();