2. /**
    3.        JS版逐帧动画，功能演示：http://cms.oa.com/demo/Animate/
    4.        安凌志 2015.12.25
    5. */
    6. var Animate = function(p){
    7.        var I = this, $i = 0, $ed = 0, c = {
    8.                obj: '',                //用于播放的jq对象
    9.                src: '',                //合并图片地址
    10.                step: 1,                //单步播放帧 (1顺放)或(-1倒放)
    11.                max: 0,                        //若动画需要移动，表示最大的left值
    12.                w: 100,                        //默认宽
    13.                h: 100,                        //默认高
    14.                len: 10,                //帧数
    15.                times: 0,                //动画每执行times次，会调用callback
    16.                callback: '',        //回调方法
    17.                speed: 30,                //单帧播放时间间隔ms
    18.                replay: 0                //循环播放起点帧
    19.        };
    20.        //若有多个动画状态，请使用c[0] c[1]下标配置的方法配置，参照http://cms.oa.com/demo/Animate/
    21.        if(p) $.extend(c, p);
    23.        I.$id = 'A'+ Math.random().toString().replace('.','');
    24.        c.obj.append('<p id="'+ I.$id +'" style="position:absolute;left:0;margin:0;padding:0;overflow:hidden"></p>');
    25.        I.$obj = $o('#'+I.$id);
    26.        if(!c.max) c.max = c.obj.outerWidth();
    28.        //播放 (状态,更新参数)
    29.        var $sta = -1;
    30.        I.play = function(sta, p){//sta是当前动画状态，p是当前动画扩展参数
    31.                sta = _int(sta);
    32.                $sta = sta;
    33.                _reset(p);
    34.                if($ed){//资源已经加载完
    35.                        _play();
    36.                }else{
    37.                        if($i) return;//已经在加载资源中
    38.                        $i = 1;
    39.                        var img = new Image();
    40.                        img.onload = function(){
    41.                                $ed = 1;
    42.                                I.$obj.css('background-image','url('+ c.src +')');
    43.                                _play();
    44.                        };
    45.                        img.src = c.src;
    46.                }
    47.        };
    49.        //移动
    50.        var _move;
    51.        I.$pos = {left:0, top:0};
    52.        I.move = function(x, y, speed){
    53.                if(speed > 10 || x === 'stop') clearTimeout(_move);
    54.                if(x === 'stop') return;
    55.                var css = {};
    56.                css.left = _int(I.$obj.css('left')) + _int(x);
    57.                css.top = _int(I.$obj.css('top')) + _int(y);
    58.                I.$obj.css(css);
    59.                I.$pos = css;
    60.                if(speed > 10){
    61.                        var fn = function(){
    62.                                if(!I.$obj[0]) return;
    63.                                if(x) css.left += x;
    64.                                if(y) css.top += y;
    65.                                I.$obj.css(css);
    66.                                I.$pos = css;
    67.                                if(css.left >= c.max) return I.die();
    68.                                _move = setTimeout(fn, speed);
    69.                        };
    70.                        fn();
    71.                }
    72.                return css;
    73.        };
    75.        //死亡
    76.        I.die = function(){
    77.                if(!I.$obj[0]) return;
    78.                if(_t)clearTimeout(_t);
    79.                I.$obj.remove();
    80.                I.$obj[0] = null;
    81.        };
    83.        /**以下为私有方法        ******************************************************/
    84.        var $c = {}, $frame, $def, $top = 0, _reset = function(p){//重置动画状态属性
    85.                if($c.x || $c.y) I.move(-$c.x, -$c.y);//若上一个状态有坐标偏移，在此处还原回去
    86.                $c = c[$sta] ? clone(c[$sta]) : {};
    87.                $.each(['w','h','len','speed','replay','times'], function(i,k){
    88.                        if(!$c[k]) $c[k] = c[k];
    89.                });
    90.                if(p) $.extend($c, p);
    91.                if($c.x !== 0 || $c.y !== 0) I.move($c.x||0, $c.y||0);//坐标偏移
    92.                $def = c.step > 0 ? 0 : $c.len;
    93.                $frame = $def;
    94.                $top = 0;
    95.                for(var i=0; i<$sta; i++){
    96.                        var o = c[i] || {};
    97.                        $top -= o.h || c.h;
    98.                }
    99.                I.$obj.css({width:$c.w, height:$c.h,'background-position':'0 '+ $top +'px'});
    100.        },
    101.        _int = function(v){//取整
    102.                return parseInt(v) || 0;
    103.        }, _t,
    104.        _play = function(){
    105.                var n = 0,//播放次数
    106.                        f = function(){
    107.                                if(!I.$obj[0]) return;
    108.                                I.$obj.css('background-position', '-'+ ($c.w*$frame) +'px '+ $top +'px');
    109.                                $frame += c.step;
    110.                                if(c.step > 0 ? $frame >= $c.len : $frame <= 0){
    111.                                        $frame = $c.replay || c.replay || $def;
    112.                                        I.$obj = $o('#'+I.$id);//防止dom不存在的时候，动画不消失
    113.                                        n++;
    114.                                        if($c.times > 0 && n % $c.times === 0 && typeof c.callback == 'function'){
    115.                                                c.callback(I, {n:n,sta:$sta});
    116.                                        }
    117.                                }
    118.                                _t = setTimeout(f, $c.speed);
    119.                        };
    120.                if(_t) clearTimeout(_t);
    121.                f();
    122.        };
    123. };