X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/fx/Anim.js diff --git a/src/fx/Anim.js b/src/fx/Anim.js index be4462ae..ac806cfe 100644 --- a/src/fx/Anim.js +++ b/src/fx/Anim.js @@ -14,36 +14,37 @@ If you are unsure which license is appropriate for your use, please contact the */ /** * @class Ext.fx.Anim - * + * * This class manages animation for a specific {@link #target}. The animation allows * animation of various properties on the target, such as size, position, color and others. - * + * * ## Starting Conditions * The starting conditions for the animation are provided by the {@link #from} configuration. * Any/all of the properties in the {@link #from} configuration can be specified. If a particular * property is not defined, the starting value for that property will be read directly from the target. - * + * * ## End Conditions * The ending conditions for the animation are provided by the {@link #to} configuration. These mark * the final values once the animations has finished. The values in the {@link #from} can mirror * those in the {@link #to} configuration to provide a starting point. - * + * * ## Other Options * - {@link #duration}: Specifies the time period of the animation. * - {@link #easing}: Specifies the easing of the animation. * - {@link #iterations}: Allows the animation to repeat a number of times. * - {@link #alternate}: Used in conjunction with {@link #iterations}, reverses the direction every second iteration. - * + * * ## Example Code - * + * + * @example * var myComponent = Ext.create('Ext.Component', { * renderTo: document.body, * width: 200, * height: 200, * style: 'border: 1px solid red;' * }); - * - * new Ext.fx.Anim({ + * + * Ext.create('Ext.fx.Anim', { * target: myComponent, * duration: 1000, * from: { @@ -68,6 +69,17 @@ Ext.define('Ext.fx.Anim', { /* End Definitions */ isAnimation: true, + + /** + * @cfg {Function} callback + * A function to be run after the animation has completed. + */ + + /** + * @cfg {Function} scope + * The scope that the {@link #callback} function will be called with + */ + /** * @cfg {Number} duration * Time in milliseconds for a single animation to last. Defaults to 250. If the {@link #iterations} property is @@ -93,7 +105,7 @@ Ext.define('Ext.fx.Anim', { /** * @cfg {String} easing This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change -speed over its duration. +speed over its duration. -backIn -backOut @@ -162,7 +174,7 @@ keyframes : { /** * Flag to determine if the animation has started * @property running - * @type boolean + * @type Boolean */ running: false, @@ -170,13 +182,13 @@ keyframes : { * Flag to determine if the animation is paused. Only set this to true if you need to * keep the Anim instance around to be unpaused later; otherwise call {@link #end}. * @property paused - * @type boolean + * @type Boolean */ paused: false, /** * Number of times to execute the animation. Defaults to 1. - * @cfg {int} iterations + * @cfg {Number} iterations */ iterations: 1, @@ -190,7 +202,7 @@ keyframes : { /** * Current iteration the animation is running. * @property currentIteration - * @type int + * @type Number */ currentIteration: 0, @@ -243,7 +255,9 @@ from : { // @private constructor: function(config) { - var me = this; + var me = this, + curve; + config = config || {}; // If keyframes are passed, they really want an Animator instead. if (config.keyframes) { @@ -263,8 +277,8 @@ from : { if (!me.easingFn) { me.easingFn = String(me.easing).match(me.bezierRE); if (me.easingFn && me.easingFn.length == 5) { - var curve = me.easingFn; - me.easingFn = Ext.fx.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]); + curve = me.easingFn; + me.easingFn = Ext.fx.CubicBezier.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]); } } me.id = Ext.id(null, 'ext-anim-'); @@ -306,7 +320,7 @@ from : { return Ext.fx.Manager.items.get(this.id).setAttr(this.target, attr, value); }, - /* + /** * @private * Set up the initial currentAttrs hash. */ @@ -340,7 +354,7 @@ from : { me.currentAttrs = out; }, - /* + /** * @private * Fires beforeanimate and sets the running flag. */ @@ -374,7 +388,7 @@ from : { } }, - /* + /** * @private * Calculate attribute value at the passed timestamp. * @returns a hash of the new attributes. @@ -406,7 +420,7 @@ from : { return ret; }, - /* + /** * @private * Perform lastFrame cleanup and handle iterations * @returns a hash of the new attributes. @@ -433,7 +447,7 @@ from : { } }, - /* + /** * Fire afteranimate event and end the animation. Usually called automatically when the * animation reaches its final frame, but can also be called manually to pre-emptively * stop and destroy the running animation.