3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
15 var EXTLIB = Ext.lib,
\r
16 noNegatives = /width|height|opacity|padding/i,
\r
17 offsetAttribute = /^((width|height)|(top|left))$/,
\r
18 defaultUnit = /width|height|top$|bottom$|left$|right$/i,
\r
19 offsetUnit = /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,
\r
20 isset = function(v){
\r
21 return typeof v !== 'undefined';
\r
28 motion : function(el, args, duration, easing, cb, scope) {
\r
29 return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion);
\r
32 run : function(el, args, duration, easing, cb, scope, type) {
\r
33 type = type || Ext.lib.AnimBase;
\r
34 if (typeof easing == "string") {
\r
35 easing = Ext.lib.Easing[easing];
\r
37 var anim = new type(el, args, duration, easing);
\r
38 anim.animateX(function() {
\r
39 if(Ext.isFunction(cb)){
\r
47 EXTLIB.AnimBase = function(el, attributes, duration, method) {
\r
49 this.init(el, attributes, duration, method);
\r
53 EXTLIB.AnimBase.prototype = {
\r
54 doMethod: function(attr, start, end) {
\r
56 return me.method(me.curFrame, start, end - start, me.totalFrames);
\r
60 setAttr: function(attr, val, unit) {
\r
61 if (noNegatives.test(attr) && val < 0) {
\r
64 Ext.fly(this.el, '_anim').setStyle(attr, val + unit);
\r
68 getAttr: function(attr) {
\r
69 var el = Ext.fly(this.el),
\r
70 val = el.getStyle(attr),
\r
71 a = offsetAttribute.exec(attr) || []
\r
73 if (val !== 'auto' && !offsetUnit.test(val)) {
\r
74 return parseFloat(val);
\r
77 return (!!(a[2]) || (el.getStyle('position') == 'absolute' && !!(a[3]))) ? el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0;
\r
81 getDefaultUnit: function(attr) {
\r
82 return defaultUnit.test(attr) ? 'px' : '';
\r
85 animateX : function(callback, scope) {
\r
88 me.onComplete.removeListener(f);
\r
89 if (Ext.isFunction(callback)) {
\r
90 callback.call(scope || me, me);
\r
93 me.onComplete.addListener(f, me);
\r
98 setRunAttr: function(attr) {
\r
100 a = this.attributes[attr],
\r
105 ra = (this.runAttrs[attr] = {}),
\r
108 if (!isset(to) && !isset(by)){
\r
112 var start = isset(from) ? from : me.getAttr(attr);
\r
115 }else if(isset(by)) {
\r
116 if (Ext.isArray(start)){
\r
118 Ext.each(start, function(v, i){
\r
119 end[i] = v + by[i];
\r
129 unit: isset(unit) ? unit : me.getDefaultUnit(attr)
\r
134 init: function(el, attributes, duration, method) {
\r
137 mgr = EXTLIB.AnimMgr;
\r
142 el: Ext.getDom(el),
\r
143 attributes: attributes || {},
\r
144 duration: duration || 1,
\r
145 method: method || EXTLIB.Easing.easeNone,
\r
148 totalFrames: mgr.fps,
\r
150 animate: function(){
\r
159 me.totalFrames = me.useSec ? Math.ceil(mgr.fps * d) : d;
\r
160 mgr.registerElement(me);
\r
163 stop: function(finish){
\r
167 me.curFrame = me.totalFrames;
\r
168 me._onTween.fire();
\r
174 var onStart = function(){
\r
180 for(attr in this.attributes){
\r
181 this.setRunAttr(attr);
\r
184 me.isAnimated = true;
\r
185 me.startTime = now();
\r
190 var onTween = function(){
\r
194 duration: now() - me.startTime,
\r
195 curFrame: me.curFrame
\r
198 var ra = me.runAttrs;
\r
199 for (var attr in ra) {
\r
200 this.setAttr(attr, me.doMethod(attr, ra[attr].start, ra[attr].end), ra[attr].unit);
\r
206 var onComplete = function() {
\r
208 actual = (now() - me.startTime) / 1000,
\r
211 frames: actualFrames,
\r
212 fps: actualFrames / actual
\r
215 me.isAnimated = false;
\r
217 me.onComplete.fire(data);
\r
220 me.onStart = new Ext.util.Event(me);
\r
221 me.onTween = new Ext.util.Event(me);
\r
222 me.onComplete = new Ext.util.Event(me);
\r
223 (me._onStart = new Ext.util.Event(me)).addListener(onStart);
\r
224 (me._onTween = new Ext.util.Event(me)).addListener(onTween);
\r
225 (me._onComplete = new Ext.util.Event(me)).addListener(onComplete);
\r
230 Ext.lib.AnimMgr = new function() {
\r
240 registerElement: function(tween){
\r
243 tween._onStart.fire();
\r
247 unRegister: function(tween, index){
\r
248 tween._onComplete.fire();
\r
249 index = index || getIndex(tween);
\r
251 queue.splice(index, 1);
\r
254 if (--tweenCount <= 0) {
\r
260 if(thread === null){
\r
261 thread = setInterval(me.run, me.delay);
\r
265 stop: function(tween){
\r
267 clearInterval(thread);
\r
268 for(var i = 0, len = queue.length; i < len; ++i){
\r
269 if(queue[0].isAnimated){
\r
270 me.unRegister(queue[0], 0);
\r
278 me.unRegister(tween);
\r
284 Ext.each(queue, function(tween){
\r
285 if(tween && tween.isAnimated){
\r
286 tf = tween.totalFrames;
\r
287 if(tween.curFrame < tf || tf === null){
\r
290 correctFrame(tween);
\r
292 tween._onTween.fire();
\r
301 var getIndex = function(anim) {
\r
303 Ext.each(queue, function(item, idx){
\r
313 var correctFrame = function(tween) {
\r
314 var frames = tween.totalFrames,
\r
315 frame = tween.curFrame,
\r
316 duration = tween.duration,
\r
317 expected = (frame * duration * 1000 / frames),
\r
318 elapsed = (now() - tween.startTime),
\r
321 if(elapsed < duration * 1000){
\r
322 tweak = Math.round((elapsed / expected - 1) * frame);
\r
324 tweak = frames - (frame + 1);
\r
326 if(tweak > 0 && isFinite(tweak)){
\r
327 if(tween.curFrame + tweak >= frames){
\r
328 tweak = frames - (frame + 1);
\r
330 tween.curFrame += tweak;
\r
335 EXTLIB.Bezier = new function() {
\r
337 this.getPosition = function(points, t) {
\r
338 var n = points.length,
\r
344 for (i = 0; i < n; ++i) {
\r
345 tmp[i] = [points[i][0], points[i][1]];
\r
348 for (j = 1; j < n; ++j) {
\r
349 for (i = 0; i < n - j; ++i) {
\r
350 tmp[i][0] = c * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
\r
351 tmp[i][1] = c * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
\r
355 return [ tmp[0][0], tmp[0][1] ];
\r
362 easeNone: function (t, b, c, d) {
\r
363 return c * t / d + b;
\r
367 easeIn: function (t, b, c, d) {
\r
368 return c * (t /= d) * t + b;
\r
372 easeOut: function (t, b, c, d) {
\r
373 return -c * (t /= d) * (t - 2) + b;
\r
378 EXTLIB.Motion = function(el, attributes, duration, method) {
\r
380 EXTLIB.Motion.superclass.constructor.call(this, el, attributes, duration, method);
\r
384 Ext.extend(EXTLIB.Motion, Ext.lib.AnimBase);
\r
386 var superclass = EXTLIB.Motion.superclass,
\r
387 proto = EXTLIB.Motion.prototype,
\r
388 pointsRe = /^points$/i;
\r
390 Ext.apply(EXTLIB.Motion.prototype, {
\r
391 setAttr: function(attr, val, unit){
\r
393 setAttr = superclass.setAttr;
\r
395 if (pointsRe.test(attr)) {
\r
396 unit = unit || 'px';
\r
397 setAttr.call(me, 'left', val[0], unit);
\r
398 setAttr.call(me, 'top', val[1], unit);
\r
400 setAttr.call(me, attr, val, unit);
\r
404 getAttr: function(attr){
\r
406 getAttr = superclass.getAttr;
\r
408 return pointsRe.test(attr) ? [getAttr.call(me, 'left'), getAttr.call(me, 'top')] : getAttr.call(me, attr);
\r
411 doMethod: function(attr, start, end){
\r
414 return pointsRe.test(attr)
\r
415 ? EXTLIB.Bezier.getPosition(me.runAttrs[attr], me.method(me.curFrame, 0, 100, me.totalFrames) / 100)
\r
416 : superclass.doMethod.call(me, attr, start, end);
\r
419 setRunAttr: function(attr){
\r
420 if(pointsRe.test(attr)){
\r
424 points = this.attributes.points,
\r
425 control = points.control || [],
\r
426 from = points.from,
\r
437 if(control.length > 0 && !Ext.isArray(control[0])){
\r
438 control = [control];
\r
442 for (i = 0,len = control.length; i < len; ++i) {
\r
443 tmp[i] = control[i];
\r
449 Ext.fly(el, '_anim').position();
\r
450 DOM.setXY(el, isset(from) ? from : DOM.getXY(el));
\r
451 start = me.getAttr('points');
\r
455 end = translateValues.call(me, to, start);
\r
456 for (i = 0,len = control.length; i < len; ++i) {
\r
457 control[i] = translateValues.call(me, control[i], start);
\r
459 } else if (isset(by)) {
\r
460 end = [start[0] + by[0], start[1] + by[1]];
\r
462 for (i = 0,len = control.length; i < len; ++i) {
\r
463 control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
\r
467 ra = this.runAttrs[attr] = [start];
\r
468 if (control.length > 0) {
\r
469 ra = ra.concat(control);
\r
472 ra[ra.length] = end;
\r
474 superclass.setRunAttr.call(this, attr);
\r
479 var translateValues = function(val, start) {
\r
480 var pageXY = EXTLIB.Dom.getXY(this.el);
\r
481 return [val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1]];
\r