docs/source/ext-base-anim.html

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