-<!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.Animator'>/**
+<!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-Animator'>/**
</span> * @class Ext.fx.Animator
- * Animation instance
-
-This class is used to run keyframe based animations, which follows the CSS3 based animation structure.
-Keyframe animations differ from typical from/to animations in that they offer the ability to specify values
-at various points throughout the animation.
-
-__Using Keyframes__
-The {@link #keyframes} option is the most important part of specifying an animation when using this
-class. A key frame is a point in a particular animation. We represent this as a percentage of the
-total animation duration. At each key frame, we can specify the target values at that time. Note that
-you *must* specify the values at 0% and 100%, the start and ending values. There is also a {@link keyframe}
-event that fires after each key frame is reached.
-
-__Example Usage__
-In the example below, we modify the values of the element at each fifth throughout the animation.
-
- Ext.create('Ext.fx.Animator', {
- target: Ext.getBody().createChild({
- style: {
- width: '100px',
- height: '100px',
- 'background-color': 'red'
- }
- }),
- duration: 10000, // 10 seconds
- keyframes: {
- 0: {
- opacity: 1,
- backgroundColor: 'FF0000'
- },
- 20: {
- x: 30,
- opacity: 0.5
- },
- 40: {
- x: 130,
- backgroundColor: '0000FF'
- },
- 60: {
- y: 80,
- opacity: 0.3
- },
- 80: {
- width: 200,
- y: 200
- },
- 100: {
- opacity: 1,
- backgroundColor: '00FF00'
- }
- }
- });
-
- * @markdown
+ *
+ * This class is used to run keyframe based animations, which follows the CSS3 based animation structure.
+ * Keyframe animations differ from typical from/to animations in that they offer the ability to specify values
+ * at various points throughout the animation.
+ *
+ * ## Using Keyframes
+ *
+ * The {@link #keyframes} option is the most important part of specifying an animation when using this
+ * class. A key frame is a point in a particular animation. We represent this as a percentage of the
+ * total animation duration. At each key frame, we can specify the target values at that time. Note that
+ * you *must* specify the values at 0% and 100%, the start and ending values. There is also a {@link #keyframe}
+ * event that fires after each key frame is reached.
+ *
+ * ## Example
+ *
+ * In the example below, we modify the values of the element at each fifth throughout the animation.
+ *
+ * @example
+ * Ext.create('Ext.fx.Animator', {
+ * target: Ext.getBody().createChild({
+ * style: {
+ * width: '100px',
+ * height: '100px',
+ * 'background-color': 'red'
+ * }
+ * }),
+ * duration: 10000, // 10 seconds
+ * keyframes: {
+ * 0: {
+ * opacity: 1,
+ * backgroundColor: 'FF0000'
+ * },
+ * 20: {
+ * x: 30,
+ * opacity: 0.5
+ * },
+ * 40: {
+ * x: 130,
+ * backgroundColor: '0000FF'
+ * },
+ * 60: {
+ * y: 80,
+ * opacity: 0.3
+ * },
+ * 80: {
+ * width: 200,
+ * y: 200
+ * },
+ * 100: {
+ * opacity: 1,
+ * backgroundColor: '00FF00'
+ * }
+ * }
+ * });
*/
Ext.define('Ext.fx.Animator', {
isAnimator: true,
-<span id='Ext-fx.Animator-cfg-duration'> /**
+<span id='Ext-fx-Animator-cfg-duration'> /**
</span> * @cfg {Number} duration
* Time in milliseconds for the animation to last. Defaults to 250.
*/
duration: 250,
-<span id='Ext-fx.Animator-cfg-delay'> /**
+<span id='Ext-fx-Animator-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.Animator-cfg-dynamic'> /**
+<span id='Ext-fx-Animator-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.Animator-cfg-easing'> /**
+<span id='Ext-fx-Animator-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.
-
-- backIn
-- backOut
-- bounceIn
-- bounceOut
-- ease
-- easeIn
-- easeOut
-- easeInOut
-- elasticIn
-- 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.
-
- * @markdown
+ *
+ * This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change
+ * speed over its duration.
+ *
+ * - backIn
+ * - backOut
+ * - bounceIn
+ * - bounceOut
+ * - ease
+ * - easeIn
+ * - easeOut
+ * - easeInOut
+ * - elasticIn
+ * - elasticOut
+ * - cubic-bezier(x1, y1, x2, y2)
+ *
+ * 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
*/
easing: 'ease',
-<span id='Ext-fx.Animator-property-running'> /**
+<span id='Ext-fx-Animator-property-running'> /**
</span> * Flag to determine if the animation has started
* @property running
- * @type boolean
+ * @type Boolean
*/
running: false,
-<span id='Ext-fx.Animator-property-paused'> /**
+<span id='Ext-fx-Animator-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.Animator-property-damper'> /**
+<span id='Ext-fx-Animator-property-damper'> /**
</span> * @private
*/
damper: 1,
-<span id='Ext-fx.Animator-cfg-iterations'> /**
+<span id='Ext-fx-Animator-cfg-iterations'> /**
</span> * @cfg {Number} iterations
* Number of times to execute the animation. Defaults to 1.
*/
iterations: 1,
-<span id='Ext-fx.Animator-property-currentIteration'> /**
+<span id='Ext-fx-Animator-property-currentIteration'> /**
</span> * Current iteration the animation is running.
* @property currentIteration
- * @type int
+ * @type Number
*/
currentIteration: 0,
-<span id='Ext-fx.Animator-property-keyframeStep'> /**
+<span id='Ext-fx-Animator-property-keyframeStep'> /**
</span> * Current keyframe step of the animation.
* @property keyframeStep
* @type Number
*/
keyframeStep: 0,
-<span id='Ext-fx.Animator-property-animKeyFramesRE'> /**
+<span id='Ext-fx-Animator-property-animKeyFramesRE'> /**
</span> * @private
*/
animKeyFramesRE: /^(from|to|\d+%?)$/,
-<span id='Ext-fx.Animator-cfg-target'> /**
-</span> * @cfg {Ext.fx.target} target
+<span id='Ext-fx-Animator-cfg-target'> /**
+</span> * @cfg {Ext.fx.target.Target} target
* The Ext.fx.target to apply the animation to. If not specified during initialization, this can be passed to the applyAnimator
* method to apply the same animation to many targets.
*/
-<span id='Ext-fx.Animator-cfg-keyframes'> /**
+<span id='Ext-fx-Animator-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
me.config = config;
me.id = Ext.id(null, 'ext-animator-');
me.addEvents(
-<span id='Ext-fx.Animator-event-beforeanimate'> /**
+<span id='Ext-fx-Animator-event-beforeanimate'> /**
</span> * @event beforeanimate
* Fires before the animation starts. A handler can return false to cancel the animation.
* @param {Ext.fx.Animator} this
*/
'beforeanimate',
-<span id='Ext-fx.Animator-event-keyframe'> /**
+<span id='Ext-fx-Animator-event-keyframe'> /**
</span> * @event keyframe
* Fires at each keyframe.
* @param {Ext.fx.Animator} this
* @param {Number} keyframe step number
*/
'keyframe',
-<span id='Ext-fx.Animator-event-afteranimate'> /**
+<span id='Ext-fx-Animator-event-afteranimate'> /**
</span> * @event afteranimate
* Fires when the animation is complete.
* @param {Ext.fx.Animator} this
}
},
-<span id='Ext-fx.Animator-method-sorter'> /**
+<span id='Ext-fx-Animator-method-sorter'> /**
</span> * @private
*/
sorter: function (a, b) {
return a.pct - b.pct;
},
-<span id='Ext-fx.Animator-method-createTimeline'> /**
+<span id='Ext-fx-Animator-method-createTimeline'> /**
</span> * @private
* Takes the given keyframe configuration object and converts it into an ordered array with the passed attributes per keyframe
* or applying the 'to' configuration to all keyframes. Also calculates the proper animation duration per keyframe.
}
},
-<span id='Ext-fx.Animator-property-applyAnimator'> /**
+<span id='Ext-fx-Animator-property-applyAnimator'> /**
</span> * Applies animation to the Ext.fx.target
* @private
* @param target
- * @type string/object
+ * @type String/Object
*/
applyAnimator: function(target) {
var me = this,
}
},
- /*
- * @private
+<span id='Ext-fx-Animator-method-start'> /**
+</span> * @private
* Fires beforeanimate and sets the running flag.
*/
start: function(startTime) {
}
},
- /*
- * @private
+<span id='Ext-fx-Animator-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-Animator-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.
*/
var me = this;
me.fireEvent('afteranimate', me, me.startTime, new Date() - me.startTime);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff