X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/fx/Animator.js

diff --git a/src/fx/Animator.js b/src/fx/Animator.js
index 5a0f7c91..7f75a3d7 100644
--- a/src/fx/Animator.js
+++ b/src/fx/Animator.js
@@ -14,60 +14,60 @@ If you are unsure which license is appropriate for your use, please contact the
 */
 /**
  * @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', {
 
@@ -106,36 +106,34 @@ Ext.define('Ext.fx.Animator', {
 
     /**
      * @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][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
+     *
+     * 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',
 
     /**
      * Flag to determine if the animation has started
      * @property running
-     * @type boolean
+     * @type Boolean
      */
     running: false,
 
@@ -143,7 +141,7 @@ be in the range [0, 1] or the definition is invalid.
      * 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 +159,7 @@ be in the range [0, 1] or the definition is invalid.
     /**
      * Current iteration the animation is running.
      * @property currentIteration
-     * @type int
+     * @type Number
      */
     currentIteration: 0,
 
@@ -178,7 +176,7 @@ be in the range [0, 1] or the definition is invalid.
     animKeyFramesRE: /^(from|to|\d+%?)$/,
 
     /**
-     * @cfg {Ext.fx.target} target
+     * @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 +297,7 @@ keyframes : {
      * Applies animation to the Ext.fx.target
      * @private
      * @param target
-     * @type string/object
+     * @type String/Object
      */
     applyAnimator: function(target) {
         var me = this,
@@ -345,7 +343,7 @@ keyframes : {
         }
     },
 
-    /*
+    /**
      * @private
      * Fires beforeanimate and sets the running flag.
      */
@@ -377,7 +375,7 @@ keyframes : {
         }
     },
 
-    /*
+    /**
      * @private
      * Perform lastFrame cleanup and handle iterations
      * @returns a hash of the new attributes.
@@ -401,7 +399,7 @@ keyframes : {
         }
     },
 
-    /*
+    /**
      * 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.