ext-base-anim.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:15k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ (function(){    
  2.     var EXTLIB = Ext.lib,
  3.         noNegatives = /width|height|opacity|padding/i,
  4.         offsetAttribute = /^((width|height)|(top|left))$/,
  5.         defaultUnit = /width|height|top$|bottom$|left$|right$/i,
  6.         offsetUnit =  /d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,
  7.         isset = function(v){
  8.             return typeof v !== 'undefined';
  9.         },
  10.         now = function(){
  11.             return new Date();    
  12.         };
  13.         
  14.     EXTLIB.Anim = {
  15.         motion : function(el, args, duration, easing, cb, scope) {
  16.             return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion);
  17.         },
  18.         run : function(el, args, duration, easing, cb, scope, type) {
  19.             type = type || Ext.lib.AnimBase;
  20.             if (typeof easing == "string") {
  21.                 easing = Ext.lib.Easing[easing];
  22.             }
  23.             var anim = new type(el, args, duration, easing);
  24.             anim.animateX(function() {
  25.                 if(Ext.isFunction(cb)){
  26.                     cb.call(scope);
  27.                 }
  28.             });
  29.             return anim;
  30.         }
  31.     };
  32.     
  33.     EXTLIB.AnimBase = function(el, attributes, duration, method) {
  34.         if (el) {
  35.             this.init(el, attributes, duration, method);
  36.         }
  37.     };
  38.     EXTLIB.AnimBase.prototype = {
  39.         doMethod: function(attr, start, end) {
  40.             var me = this;
  41.             return me.method(me.curFrame, start, end - start, me.totalFrames);
  42.         },
  43.         setAttr: function(attr, val, unit) {
  44.             if (noNegatives.test(attr) && val < 0) {
  45.                 val = 0;
  46.             }
  47.             Ext.fly(this.el, '_anim').setStyle(attr, val + unit);
  48.         },
  49.         getAttr: function(attr) {
  50.             var el = Ext.fly(this.el),
  51.                 val = el.getStyle(attr),
  52.                 a = offsetAttribute.exec(attr) || []
  53.             if (val !== 'auto' && !offsetUnit.test(val)) {
  54.                 return parseFloat(val);
  55.             }
  56.             return (!!(a[2]) || (el.getStyle('position') == 'absolute' && !!(a[3]))) ? el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0;
  57.         },
  58.         getDefaultUnit: function(attr) {
  59.             return defaultUnit.test(attr) ? 'px' : '';
  60.         },
  61.         animateX : function(callback, scope) {
  62.             var me = this,
  63.                 f = function() {
  64.                 me.onComplete.removeListener(f);
  65.                 if (Ext.isFunction(callback)) {
  66.                     callback.call(scope || me, me);
  67.                 }
  68.             };
  69.             me.onComplete.addListener(f, me);
  70.             me.animate();
  71.         },
  72.         setRunAttr: function(attr) {            
  73.             var me = this,
  74.                 a = this.attributes[attr],
  75.                 to = a.to,
  76.                 by = a.by,
  77.                 from = a.from,
  78.                 unit = a.unit,
  79.                 ra = (this.runAttrs[attr] = {}),
  80.                 end;
  81.             if (!isset(to) && !isset(by)){
  82.                 return false;
  83.             }
  84.             var start = isset(from) ? from : me.getAttr(attr);
  85.             if (isset(to)) {
  86.                 end = to;
  87.             }else if(isset(by)) {
  88.                 if (Ext.isArray(start)){
  89.                     end = [];
  90.                     Ext.each(start, function(v, i){
  91.                         end[i] = v + by[i];
  92.                     });
  93.                 }else{
  94.                     end = start + by;
  95.                 }
  96.             }
  97.             Ext.apply(ra, {
  98.                 start: start,
  99.                 end: end,
  100.                 unit: isset(unit) ? unit : me.getDefaultUnit(attr)
  101.             });
  102.         },
  103.         init: function(el, attributes, duration, method) {
  104.             var me = this,
  105.                 actualFrames = 0,
  106.                 mgr = EXTLIB.AnimMgr;
  107.                 
  108.             Ext.apply(me, {
  109.                 isAnimated: false,
  110.                 startTime: null,
  111.                 el: Ext.getDom(el),
  112.                 attributes: attributes || {},
  113.                 duration: duration || 1,
  114.                 method: method || EXTLIB.Easing.easeNone,
  115.                 useSec: true,
  116.                 curFrame: 0,
  117.                 totalFrames: mgr.fps,
  118.                 runAttrs: {},
  119.                 animate: function(){
  120.                     var me = this,
  121.                         d = me.duration;
  122.                     
  123.                     if(me.isAnimated){
  124.                         return false;
  125.                     }
  126.                     me.curFrame = 0;
  127.                     me.totalFrames = me.useSec ? Math.ceil(mgr.fps * d) : d;
  128.                     mgr.registerElement(me); 
  129.                 },
  130.                 
  131.                 stop: function(finish){
  132.                     var me = this;
  133.                 
  134.                     if(finish){
  135.                         me.curFrame = me.totalFrames;
  136.                         me._onTween.fire();
  137.                     }
  138.                     mgr.stop(me);
  139.                 }
  140.             });
  141.             var onStart = function(){
  142.                 var me = this,
  143.                     attr;
  144.                 
  145.                 me.onStart.fire();
  146.                 me.runAttrs = {};
  147.                 for(attr in this.attributes){
  148.                     this.setRunAttr(attr);
  149.                 }
  150.                 me.isAnimated = true;
  151.                 me.startTime = now();
  152.                 actualFrames = 0;
  153.             };
  154.             var onTween = function(){
  155.                 var me = this;
  156.                 me.onTween.fire({
  157.                     duration: now() - me.startTime,
  158.                     curFrame: me.curFrame
  159.                 });
  160.                 var ra = me.runAttrs;
  161.                 for (var attr in ra) {
  162.                     this.setAttr(attr, me.doMethod(attr, ra[attr].start, ra[attr].end), ra[attr].unit);
  163.                 }
  164.                 ++actualFrames;
  165.             };
  166.             var onComplete = function() {
  167.                 var me = this,
  168.                     actual = (now() - me.startTime) / 1000,
  169.                     data = {
  170.                         duration: actual,
  171.                         frames: actualFrames,
  172.                         fps: actualFrames / actual
  173.                     };
  174.                 me.isAnimated = false;
  175.                 actualFrames = 0;
  176.                 me.onComplete.fire(data);
  177.             };
  178.             me.onStart = new Ext.util.Event(me);
  179.             me.onTween = new Ext.util.Event(me);            
  180.             me.onComplete = new Ext.util.Event(me);
  181.             (me._onStart = new Ext.util.Event(me)).addListener(onStart);
  182.             (me._onTween = new Ext.util.Event(me)).addListener(onTween);
  183.             (me._onComplete = new Ext.util.Event(me)).addListener(onComplete); 
  184.         }
  185.     };
  186.     Ext.lib.AnimMgr = new function() {
  187.         var me = this,
  188.             thread = null,
  189.             queue = [],
  190.             tweenCount = 0;
  191.         Ext.apply(me, {
  192.             fps: 1000,
  193.             delay: 1,
  194.             registerElement: function(tween){
  195.                 queue.push(tween);
  196.                 ++tweenCount;
  197.                 tween._onStart.fire();
  198.                 me.start();
  199.             },
  200.             
  201.             unRegister: function(tween, index){
  202.                 tween._onComplete.fire();
  203.                 index = index || getIndex(tween);
  204.                 if (index != -1) {
  205.                     queue.splice(index, 1);
  206.                 }
  207.                 if (--tweenCount <= 0) {
  208.                     me.stop();
  209.                 }
  210.             },
  211.             
  212.             start: function(){
  213.                 if(thread === null){
  214.                     thread = setInterval(me.run, me.delay);
  215.                 }
  216.             },
  217.             
  218.             stop: function(tween){
  219.                 if(!tween){
  220.                     clearInterval(thread);
  221.                     for(var i = 0, len = queue.length; i < len; ++i){
  222.                         if(queue[0].isAnimated){
  223.                             me.unRegister(queue[0], 0);
  224.                         }
  225.                     }
  226.                     queue = [];
  227.                     thread = null;
  228.                     tweenCount = 0;
  229.                 }else{
  230.                     me.unRegister(tween);
  231.                 }
  232.             },
  233.             
  234.             run: function(){
  235.                 var tf;
  236.                 Ext.each(queue, function(tween){
  237.                     if(tween && tween.isAnimated){
  238.                         tf = tween.totalFrames;
  239.                         if(tween.curFrame < tf || tf === null){
  240.                             ++tween.curFrame;
  241.                             if(tween.useSec){
  242.                                 correctFrame(tween);
  243.                             }
  244.                             tween._onTween.fire();
  245.                         }else{
  246.                             me.stop(tween);
  247.                         }
  248.                     }
  249.                 }, me);
  250.             }
  251.         });
  252.         var getIndex = function(anim) {
  253.             var out = -1;
  254.             Ext.each(queue, function(item, idx){
  255.                 if(item == anim){
  256.                     out = idx;
  257.                     return false;
  258.                 }
  259.             });
  260.             return out;
  261.         };
  262.         var correctFrame = function(tween) {
  263.             var frames = tween.totalFrames,
  264.                 frame = tween.curFrame,
  265.                 duration = tween.duration,
  266.                 expected = (frame * duration * 1000 / frames),
  267.                 elapsed = (now() - tween.startTime),
  268.                 tweak = 0;
  269.             if(elapsed < duration * 1000){
  270.                 tweak = Math.round((elapsed / expected - 1) * frame);
  271.             }else{
  272.                 tweak = frames - (frame + 1);
  273.             }
  274.             if(tweak > 0 && isFinite(tweak)){
  275.                 if(tween.curFrame + tweak >= frames){
  276.                     tweak = frames - (frame + 1);
  277.                 }
  278.                 tween.curFrame += tweak;
  279.             }
  280.         };
  281.     };
  282.     EXTLIB.Bezier = new function() {
  283.         this.getPosition = function(points, t) {
  284.             var n = points.length,
  285.                 tmp = [],
  286.                 c = 1 - t, 
  287.                 i,
  288.                 j;
  289.             for (i = 0; i < n; ++i) {
  290.                 tmp[i] = [points[i][0], points[i][1]];
  291.             }
  292.             for (j = 1; j < n; ++j) {
  293.                 for (i = 0; i < n - j; ++i) {
  294.                     tmp[i][0] = c * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
  295.                     tmp[i][1] = c * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
  296.                 }
  297.             }
  298.             return [ tmp[0][0], tmp[0][1] ];
  299.         };
  300.     };
  301.     EXTLIB.Easing = {
  302.         easeNone: function (t, b, c, d) {
  303.             return c * t / d + b;
  304.         },
  305.         easeIn: function (t, b, c, d) {
  306.             return c * (t /= d) * t + b;
  307.         },
  308.         easeOut: function (t, b, c, d) {
  309.             return -c * (t /= d) * (t - 2) + b;
  310.         }
  311.     };
  312.     (function() {
  313.         EXTLIB.Motion = function(el, attributes, duration, method) {
  314.             if (el) {
  315.                 EXTLIB.Motion.superclass.constructor.call(this, el, attributes, duration, method);
  316.             }
  317.         };
  318.         Ext.extend(EXTLIB.Motion, Ext.lib.AnimBase);
  319.         var superclass = EXTLIB.Motion.superclass,
  320.             proto = EXTLIB.Motion.prototype,
  321.             pointsRe = /^points$/i;
  322.         Ext.apply(EXTLIB.Motion.prototype, {
  323.             setAttr: function(attr, val, unit){
  324.                 var me = this,
  325.                     setAttr = superclass.setAttr;
  326.                     
  327.                 if (pointsRe.test(attr)) {
  328.                     unit = unit || 'px';
  329.                     setAttr.call(me, 'left', val[0], unit);
  330.                     setAttr.call(me, 'top', val[1], unit);
  331.                 } else {
  332.                     setAttr.call(me, attr, val, unit);
  333.                 }
  334.             },
  335.             
  336.             getAttr: function(attr){
  337.                 var me = this,
  338.                     getAttr = superclass.getAttr;
  339.                     
  340.                 return pointsRe.test(attr) ? [getAttr.call(me, 'left'), getAttr.call(me, 'top')] : getAttr.call(me, attr);
  341.             },
  342.             
  343.             doMethod: function(attr, start, end){
  344.                 var me = this;
  345.                 
  346.                 return pointsRe.test(attr)
  347.                         ? EXTLIB.Bezier.getPosition(me.runAttrs[attr], me.method(me.curFrame, 0, 100, me.totalFrames) / 100)
  348.                         : superclass.doMethod.call(me, attr, start, end);
  349.             },
  350.             
  351.             setRunAttr: function(attr){
  352.                 if(pointsRe.test(attr)){
  353.                     
  354.                     var me = this,
  355.                         el = this.el,
  356.                         points = this.attributes.points,
  357.                         control = points.control || [],
  358.                         from = points.from,
  359.                         to = points.to,
  360.                         by = points.by,
  361.                         DOM = EXTLIB.Dom,
  362.                         start,
  363.                         i,
  364.                         end,
  365.                         len,
  366.                         ra;
  367.                   
  368.                     if(control.length > 0 && !Ext.isArray(control[0])){
  369.                         control = [control];
  370.                     }else{
  371.                         /*
  372.                         var tmp = [];
  373.                         for (i = 0,len = control.length; i < len; ++i) {
  374.                             tmp[i] = control[i];
  375.                         }
  376.                         control = tmp;
  377.                         */
  378.                     }
  379.                     Ext.fly(el, '_anim').position();
  380.                     DOM.setXY(el, isset(from) ? from : DOM.getXY(el));
  381.                     start = me.getAttr('points');
  382.                     if(isset(to)){
  383.                         end = translateValues.call(me, to, start);
  384.                         for (i = 0,len = control.length; i < len; ++i) {
  385.                             control[i] = translateValues.call(me, control[i], start);
  386.                         }
  387.                     } else if (isset(by)) {
  388.                         end = [start[0] + by[0], start[1] + by[1]];
  389.                         for (i = 0,len = control.length; i < len; ++i) {
  390.                             control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
  391.                         }
  392.                     }
  393.                     ra = this.runAttrs[attr] = [start];
  394.                     if (control.length > 0) {
  395.                         ra = ra.concat(control);
  396.                     }
  397.                     ra[ra.length] = end;
  398.                 }else{
  399.                     superclass.setRunAttr.call(this, attr);
  400.                 }
  401.             }
  402.         });
  403.         var translateValues = function(val, start) {
  404.             var pageXY = EXTLIB.Dom.getXY(this.el);
  405.             return [val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1]];
  406.         };
  407.     })();
  408. })();