Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Anim.html
index 3b65c6a..323a818 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-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: {
@@ -71,6 +72,17 @@ Ext.define('Ext.fx.Anim', {
     /* End Definitions */
 
     isAnimation: true,
+
+<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
@@ -96,7 +108,7 @@ Ext.define('Ext.fx.Anim', {
 <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
@@ -110,8 +122,12 @@ 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',
@@ -161,7 +177,7 @@ keyframes : {
 <span id='Ext-fx-Anim-property-running'>    /**
 </span>     * Flag to determine if the animation has started
      * @property running
-     * @type boolean
+     * @type Boolean
      */
     running: false,
 
@@ -169,13 +185,13 @@ keyframes : {
 </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>     * Number of times to execute the animation. Defaults to 1.
-     * @cfg {int} iterations
+     * @cfg {Number} iterations
      */
     iterations: 1,
 
@@ -189,7 +205,7 @@ keyframes : {
 <span id='Ext-fx-Anim-property-currentIteration'>    /**
 </span>     * Current iteration the animation is running.
      * @property currentIteration
-     * @type int
+     * @type Number
      */
     currentIteration: 0,
 
@@ -242,7 +258,9 @@ from : {
 
     // @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) {
@@ -262,8 +280,8 @@ from : {
         if (!me.easingFn) {
             me.easingFn = String(me.easing).match(me.bezierRE);
             if (me.easingFn &amp;&amp; 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-');
@@ -305,8 +323,8 @@ from : {
         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() {
@@ -339,8 +357,8 @@ from : {
         me.currentAttrs = out;
     },
 
-    /*
-     * @private
+<span id='Ext-fx-Anim-method-start'>    /**
+</span>     * @private
      * Fires beforeanimate and sets the running flag.
      */
     start: function(startTime) {
@@ -373,8 +391,8 @@ from : {
         }
     },
 
-    /*
-     * @private
+<span id='Ext-fx-Anim-method-runAnim'>    /**
+</span>     * @private
      * Calculate attribute value at the passed timestamp.
      * @returns a hash of the new attributes.
      */
@@ -405,8 +423,8 @@ from : {
         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.
      */
@@ -432,8 +450,8 @@ from : {
         }
     },
 
-    /*
-     * 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.
      */