-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-fx.Anim'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-fx-Anim'>/**
</span> * @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: {
/* End Definitions */
isAnimation: true,
-<span id='Ext-fx.Anim-cfg-duration'> /**
+
+<span id='Ext-fx-Anim-cfg-callback'> /**
+</span> * @cfg {Function} callback
+ * A function to be run after the animation has completed.
+ */
+
+<span id='Ext-fx-Anim-cfg-scope'> /**
+</span> * @cfg {Function} scope
+ * The scope that the {@link #callback} function will be called with
+ */
+
+<span id='Ext-fx-Anim-cfg-duration'> /**
</span> * @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,
-<span id='Ext-fx.Anim-cfg-delay'> /**
+<span id='Ext-fx-Anim-cfg-delay'> /**
</span> * @cfg {Number} delay
* Time to delay before starting the animation. Defaults to 0.
*/
/* private used to track a delayed starting time */
delayStart: 0,
-<span id='Ext-fx.Anim-cfg-dynamic'> /**
+<span id='Ext-fx-Anim-cfg-dynamic'> /**
</span> * @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,
-<span id='Ext-fx.Anim-cfg-easing'> /**
+<span id='Ext-fx-Anim-cfg-easing'> /**
</span> * @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
-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',
-<span id='Ext-fx.Anim-cfg-keyframes'> /**
+<span id='Ext-fx-Anim-cfg-keyframes'> /**
</span> * @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
</code></pre>
*/
-<span id='Ext-fx.Anim-property-damper'> /**
+<span id='Ext-fx-Anim-property-damper'> /**
</span> * @private
*/
damper: 1,
-<span id='Ext-fx.Anim-property-bezierRE'> /**
+<span id='Ext-fx-Anim-property-bezierRE'> /**
</span> * @private
*/
bezierRE: /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
-<span id='Ext-fx.Anim-cfg-reverse'> /**
+<span id='Ext-fx-Anim-cfg-reverse'> /**
</span> * Run the animation from the end to the beginning
* Defaults to false.
* @cfg {Boolean} reverse
*/
reverse: false,
-<span id='Ext-fx.Anim-property-running'> /**
+<span id='Ext-fx-Anim-property-running'> /**
</span> * Flag to determine if the animation has started
* @property running
- * @type boolean
+ * @type Boolean
*/
running: false,
-<span id='Ext-fx.Anim-property-paused'> /**
+<span id='Ext-fx-Anim-property-paused'> /**
</span> * 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,
-<span id='Ext-fx.Anim-cfg-iterations'> /**
+<span id='Ext-fx-Anim-cfg-iterations'> /**
</span> * Number of times to execute the animation. Defaults to 1.
- * @cfg {int} iterations
+ * @cfg {Number} iterations
*/
iterations: 1,
-<span id='Ext-fx.Anim-cfg-alternate'> /**
+<span id='Ext-fx-Anim-cfg-alternate'> /**
</span> * Used in conjunction with iterations to reverse the animation each time an iteration completes.
* @cfg {Boolean} alternate
* Defaults to false.
*/
alternate: false,
-<span id='Ext-fx.Anim-property-currentIteration'> /**
+<span id='Ext-fx-Anim-property-currentIteration'> /**
</span> * Current iteration the animation is running.
* @property currentIteration
- * @type int
+ * @type Number
*/
currentIteration: 0,
-<span id='Ext-fx.Anim-property-startTime'> /**
+<span id='Ext-fx-Anim-property-startTime'> /**
</span> * Starting time of the animation.
* @property startTime
* @type Date
*/
startTime: 0,
-<span id='Ext-fx.Anim-property-propHandlers'> /**
+<span id='Ext-fx-Anim-property-propHandlers'> /**
</span> * Contains a cache of the interpolators to be used.
* @private
* @property propHandlers
* @type Object
*/
-<span id='Ext-fx.Anim-cfg-target'> /**
+<span id='Ext-fx-Anim-cfg-target'> /**
</span> * @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
* automatically.
*/
-<span id='Ext-fx.Anim-cfg-from'> /**
+<span id='Ext-fx-Anim-cfg-from'> /**
</span> * @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:
</code></pre>
*/
-<span id='Ext-fx.Anim-cfg-to'> /**
+<span id='Ext-fx-Anim-cfg-to'> /**
</span> * @cfg {Object} to
* An object containing property/value pairs for the end of the animation. For example:
<pre><code>
// @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) {
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-');
Ext.fx.Manager.addAnim(me);
me.addEvents(
-<span id='Ext-fx.Anim-event-beforeanimate'> /**
+<span id='Ext-fx-Anim-event-beforeanimate'> /**
</span> * @event beforeanimate
* Fires before the animation starts. A handler can return false to cancel the animation.
* @param {Ext.fx.Anim} this
*/
'beforeanimate',
-<span id='Ext-fx.Anim-event-afteranimate'> /**
+<span id='Ext-fx-Anim-event-afteranimate'> /**
</span> * @event afteranimate
* Fires when the animation is complete.
* @param {Ext.fx.Anim} this
* @param {Date} startTime
*/
'afteranimate',
-<span id='Ext-fx.Anim-event-lastframe'> /**
+<span id='Ext-fx-Anim-event-lastframe'> /**
</span> * @event lastframe
* Fires when the animation's last frame has been set.
* @param {Ext.fx.Anim} this
return me;
},
-<span id='Ext-fx.Anim-method-setAttr'> /**
+<span id='Ext-fx-Anim-method-setAttr'> /**
</span> * @private
* Helper to the target
*/
return Ext.fx.Manager.items.get(this.id).setAttr(this.target, attr, value);
},
- /*
- * @private
+<span id='Ext-fx-Anim-method-initAttrs'> /**
+</span> * @private
* Set up the initial currentAttrs hash.
*/
initAttrs: function() {
me.currentAttrs = out;
},
- /*
- * @private
+<span id='Ext-fx-Anim-method-start'> /**
+</span> * @private
* Fires beforeanimate and sets the running flag.
*/
start: function(startTime) {
}
},
- /*
- * @private
+<span id='Ext-fx-Anim-method-runAnim'> /**
+</span> * @private
* Calculate attribute value at the passed timestamp.
* @returns a hash of the new attributes.
*/
return ret;
},
- /*
- * @private
+<span id='Ext-fx-Anim-method-lastFrame'> /**
+</span> * @private
* Perform lastFrame cleanup and handle iterations
* @returns a hash of the new attributes.
*/
}
},
- /*
- * Fire afteranimate event and end the animation. Usually called automatically when the
+<span id='Ext-fx-Anim-method-end'> /**
+</span> * 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.
*/
});
// Set flag to indicate that Fx is available. Class might not be available immediately.
Ext.enableFx = true;
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff