/ext-4.0.7/docs/source/Anim.html
HTML | 471 lines | 428 code | 43 blank | 0 comment | 0 complexity | 938739b3369adaad6d2206a97a9d9616 MD5 | raw file
- <!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;'
- * });
- *
- * Ext.create('Ext.fx.Anim', {
- * target: myComponent,
- * duration: 1000,
- * from: {
- * width: 400 //starting width 400
- * },
- * to: {
- * width: 300, //end width 300
- * height: 300 // end width 300
- * }
- * });
- */
- Ext.define('Ext.fx.Anim', {
- /* Begin Definitions */
- mixins: {
- observable: 'Ext.util.Observable'
- },
- requires: ['Ext.fx.Manager', 'Ext.fx.Animator', 'Ext.fx.Easing', 'Ext.fx.CubicBezier', 'Ext.fx.PropertyHandler'],
- /* 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
- * specified, then each animate will take the same duration for each iteration.
- */
- duration: 250,
- <span id='Ext-fx-Anim-cfg-delay'> /**
- </span> * @cfg {Number} delay
- * Time to delay before starting the animation. Defaults to 0.
- */
- delay: 0,
- /* private used to track a delayed starting time */
- delayStart: 0,
- <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> * @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
- */
- easing: 'ease',
- <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
- * "from" or "to"</b>. A keyframe declaration without these keyframe selectors is invalid and will not be available for
- * animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to
- * be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
- <pre><code>
- keyframes : {
- '0%': {
- left: 100
- },
- '40%': {
- left: 150
- },
- '60%': {
- left: 75
- },
- '100%': {
- left: 100
- }
- }
- </code></pre>
- */
- <span id='Ext-fx-Anim-property-damper'> /**
- </span> * @private
- */
- damper: 1,
- <span id='Ext-fx-Anim-property-bezierRE'> /**
- </span> * @private
- */
- bezierRE: /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
- <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> * Flag to determine if the animation has started
- * @property running
- * @type Boolean
- */
- running: false,
- <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
- */
- paused: false,
- <span id='Ext-fx-Anim-cfg-iterations'> /**
- </span> * Number of times to execute the animation. Defaults to 1.
- * @cfg {Number} iterations
- */
- iterations: 1,
- <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> * Current iteration the animation is running.
- * @property currentIteration
- * @type Number
- */
- currentIteration: 0,
- <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> * Contains a cache of the interpolators to be used.
- * @private
- * @property propHandlers
- * @type Object
- */
- <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
- * pass a Component, Element or Sprite as the target and the Anim will create the appropriate {@link Ext.fx.target.Target} object
- * automatically.
- */
- <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:
- <pre><code>
- from : {
- opacity: 0, // Transparent
- color: '#ffffff', // White
- left: 0
- }
- </code></pre>
- */
- <span id='Ext-fx-Anim-cfg-to'> /**