Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Animator.html
index 9807e50..c34376b 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <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>
 <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', {
 
@@ -109,33 +109,34 @@ Ext.define('Ext.fx.Animator', {
 
 <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>     * Flag to determine if the animation has started
      * @property running
-     * @type boolean
+     * @type Boolean
      */
     running: false,
 
@@ -143,7 +144,7 @@ as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is
 </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,
 
@@ -161,7 +162,7 @@ as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is
 <span id='Ext-fx-Animator-property-currentIteration'>    /**
 </span>     * Current iteration the animation is running.
      * @property currentIteration
-     * @type int
+     * @type Number
      */
     currentIteration: 0,
 
@@ -178,7 +179,7 @@ as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is
     animKeyFramesRE: /^(from|to|\d+%?)$/,
 
 <span id='Ext-fx-Animator-cfg-target'>    /**
-</span>     * @cfg {Ext.fx.target} 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.
      */
@@ -299,7 +300,7 @@ keyframes : {
 </span>     * Applies animation to the Ext.fx.target
      * @private
      * @param target
-     * @type string/object
+     * @type String/Object
      */
     applyAnimator: function(target) {
         var me = this,
@@ -345,8 +346,8 @@ keyframes : {
         }
     },
 
-    /*
-     * @private
+<span id='Ext-fx-Animator-method-start'>    /**
+</span>     * @private
      * Fires beforeanimate and sets the running flag.
      */
     start: function(startTime) {
@@ -377,8 +378,8 @@ keyframes : {
         }
     },
 
-    /*
-     * @private
+<span id='Ext-fx-Animator-method-lastFrame'>    /**
+</span>     * @private
      * Perform lastFrame cleanup and handle iterations
      * @returns a hash of the new attributes.
      */
@@ -401,8 +402,8 @@ keyframes : {
         }
     },
 
-    /*
-     * 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.
      */