/**
* @class Ext.fx.Anim
*
* This class manages animation for a specific {@link #target}. The animation allows
@@ -54,14 +71,14 @@ Ext.define('Ext.fx.Anim', {
/* End Definitions */
isAnimation: true,
- /**
+ /**
* @cfg {Number} duration
* Time in milliseconds for a single animation to last. Defaults to 250. If the {@link #iterations} property is
* specified, then each animate will take the same duration for each iteration.
*/
duration: 250,
- /**
+ /**
* @cfg {Number} delay
* Time to delay before starting the animation. Defaults to 0.
*/
@@ -70,13 +87,13 @@ Ext.define('Ext.fx.Anim', {
/* private used to track a delayed starting time */
delayStart: 0,
- /**
+ /**
* @cfg {Boolean} dynamic
* Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to false.
*/
dynamic: false,
- /**
+ /**
* @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.
@@ -93,13 +110,17 @@ speed over its duration.
-elasticOut
-cubic-bezier(x1, y1, x2, y2)
-Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification `{@link http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag}`. The four values specify points P1 and P2 of the curve
-as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.
+Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
+specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
+be in the range [0, 1] or the definition is invalid.
+
+[0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
+
* @markdown
*/
easing: 'ease',
- /**
+ /**
* @cfg {Object} keyframes
* Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'
* is considered '100%'.<b>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using
@@ -124,31 +145,31 @@ keyframes : {
</code></pre>
*/
- /**
+ /**
* @private
*/
damper: 1,
- /**
+ /**
* @private
*/
bezierRE: /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
- /**
+ /**
* Run the animation from the end to the beginning
* Defaults to false.
* @cfg {Boolean} reverse
*/
reverse: false,
- /**
+ /**
* Flag to determine if the animation has started
* @property running
* @type boolean
*/
running: false,
- /**
+ /**
* 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
@@ -156,41 +177,41 @@ keyframes : {
*/
paused: false,
- /**
+ /**
* Number of times to execute the animation. Defaults to 1.
* @cfg {int} iterations
*/
iterations: 1,
- /**
+ /**
* Used in conjunction with iterations to reverse the animation each time an iteration completes.
* @cfg {Boolean} alternate
* Defaults to false.
*/
alternate: false,
- /**
+ /**
* Current iteration the animation is running.
* @property currentIteration
* @type int
*/
currentIteration: 0,
- /**
+ /**
* Starting time of the animation.
* @property startTime
* @type Date
*/
startTime: 0,
- /**
+ /**
* Contains a cache of the interpolators to be used.
* @private
* @property propHandlers
* @type Object
*/
- /**
+ /**
* @cfg {String/Object} target
* The {@link Ext.fx.target.Target} to apply the animation to. This should only be specified when creating an Ext.fx.Anim directly.
* The target does not need to be a {@link Ext.fx.target.Target} instance, it can be the underlying object. For example, you can
@@ -198,7 +219,7 @@ keyframes : {
* automatically.
*/
- /**
+ /**
* @cfg {Object} from
* An object containing property/value pairs for the beginning of the animation. If not specified, the current state of the
* Ext.fx.target will be used. For example:
@@ -211,7 +232,7 @@ from : {
</code></pre>
*/
- /**
+ /**
* @cfg {Object} to
* An object containing property/value pairs for the end of the animation. For example:
<pre><code>
@@ -252,20 +273,20 @@ from : {
me.id = Ext.id(null, 'ext-anim-');
Ext.fx.Manager.addAnim(me);
me.addEvents(
- /**
+ /**
* @event beforeanimate
* Fires before the animation starts. A handler can return false to cancel the animation.
* @param {Ext.fx.Anim} this
*/
'beforeanimate',
- /**
+ /**
* @event afteranimate
* Fires when the animation is complete.
* @param {Ext.fx.Anim} this
* @param {Date} startTime
*/
'afteranimate',
- /**
+ /**
* @event lastframe
* Fires when the animation's last frame has been set.
* @param {Ext.fx.Anim} this
@@ -280,7 +301,7 @@ from : {
return me;
},
- /**
+ /**
* @private
* Helper to the target
*/
@@ -431,4 +452,6 @@ from : {
});
// Set flag to indicate that Fx is available. Class might not be available immediately.
Ext.enableFx = true;
-