src/adapter/core/ext-base-anim.js

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