/**
* @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: {
@@ -71,6 +72,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
@@ -96,7 +108,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
@@ -165,7 +177,7 @@ keyframes : {
/**
* Flag to determine if the animation has started
* @property running
- * @type boolean
+ * @type Boolean
*/
running: false,
@@ -173,13 +185,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,
@@ -193,7 +205,7 @@ keyframes : {
/**
* Current iteration the animation is running.
* @property currentIteration
- * @type int
+ * @type Number
*/
currentIteration: 0,
@@ -246,7 +258,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) {
@@ -266,8 +280,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-');
@@ -309,8 +323,8 @@ from : {
return Ext.fx.Manager.items.get(this.id).setAttr(this.target, attr, value);
},
- /*
- * @private
+ /**
+ * @private
* Set up the initial currentAttrs hash.
*/
initAttrs: function() {
@@ -343,8 +357,8 @@ from : {
me.currentAttrs = out;
},
- /*
- * @private
+ /**
+ * @private
* Fires beforeanimate and sets the running flag.
*/
start: function(startTime) {
@@ -377,8 +391,8 @@ from : {
}
},
- /*
- * @private
+ /**
+ * @private
* Calculate attribute value at the passed timestamp.
* @returns a hash of the new attributes.
*/
@@ -409,8 +423,8 @@ from : {
return ret;
},
- /*
- * @private
+ /**
+ * @private
* Perform lastFrame cleanup and handle iterations
* @returns a hash of the new attributes.
*/
@@ -436,8 +450,8 @@ from : {
}
},
- /*
- * Fire afteranimate event and end the animation. Usually called automatically when the
+ /**
+ * 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.
*/