--- /dev/null
+<!DOCTYPE html><html><head><title>Ext.util.Animate | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
+<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
+
+ req = {
+ liveURL: '.',
+ standAloneMode: true,
+ origDocClass: 'Ext.util.Animate',
+ docClass: 'Ext.util.Animate',
+ docReq: 'Ext.util.Animate',
+ version: '4.0',
+ baseURL: '.',
+ baseDocURL: '.',
+ baseProdURL: '.'
+ };
+
+ clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+ req.source = 'Animate.html#Ext-util.Animate';
+ clsInfo = {"methods":["animate","getActiveAnimation","sequenceFx","stopAnimation","syncFx"],"cfgs":[],"properties":["hasActiveFx","stopFx"],"events":[],"subclasses":[]};
+ Ext.onReady(function() {
+ Ext.create('Docs.classPanel');
+ });
+</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Animate.html#Ext-util.Animate" target="_blank">Ext.util.Animate</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>This animation class is a mixin.</p>
+
+<p>Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.<br/>
+This class is used as a mixin and currently applied to <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, <a href="Ext.CompositeElement.html" rel="Ext.CompositeElement" class="docClass">Ext.CompositeElement</a>,
+<a href="Ext.draw.Sprite.html" rel="Ext.draw.Sprite" class="docClass">Ext.draw.Sprite</a>, <a href="Ext.draw.CompositeSprite.html" rel="Ext.draw.CompositeSprite" class="docClass">Ext.draw.CompositeSprite</a>, and <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>. Note that Components
+have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
+opacity (color, paddings, and margins can not be animated).</p>
+
+<h2>Animation Basics</h2>
+
+<p>All animations require three things - <code>easing</code>, <code>duration</code>, and <code>to</code> (the final end value for each property)
+you wish to animate. Easing and duration are defaulted values specified below.
+Easing describes how the intermediate values used during a transition will be calculated.
+<a href="Ext.fx.Anim.html#easing" rel="Ext.fx.Anim#easing" class="docClass">Easing</a> allows for a transition to change speed over its duration.
+You may use the defaults for easing and duration, but you must always set a
+<a href="Ext.fx.Anim.html#to" rel="Ext.fx.Anim#to" class="docClass">to</a> property which is the end value for all animations.</p>
+
+<p>Popular element 'to' configurations are:</p>
+
+<ul>
+<li>opacity</li>
+<li>x</li>
+<li>y</li>
+<li>color</li>
+<li>height</li>
+<li>width</li>
+</ul>
+
+
+<p>Popular sprite 'to' configurations are:</p>
+
+<ul>
+<li>translation</li>
+<li>path</li>
+<li>scale</li>
+<li>stroke</li>
+<li>rotation</li>
+</ul>
+
+
+<p>The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in
+milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve
+used for all animations is 'ease'. Popular easing functions are included and can be found in <a href="Ext.fx.Anim.html#easing" rel="Ext.fx.Anim#easing" class="docClass">Easing</a>.</p>
+
+<p>For example, a simple animation to fade out an element with a default easing and duration:</p>
+
+<pre class="prettyprint"><code>var p1 = Ext.get('myElementId');
+
+p1.animate({
+ to: {
+ opacity: 0
+ }
+});
+</code></pre>
+
+<p>To make this animation fade out in a tenth of a second:</p>
+
+<pre class="prettyprint"><code>var p1 = Ext.get('myElementId');
+
+p1.animate({
+ duration: 100,
+ to: {
+ opacity: 0
+ }
+});
+</code></pre>
+
+<h2>Animation Queues</h2>
+
+<p>By default all animations are added to a queue which allows for animation via a chain-style API.
+For example, the following code will queue 4 animations which occur sequentially (one right after the other):</p>
+
+<pre class="prettyprint"><code>p1.animate({
+ to: {
+ x: 500
+ }
+}).animate({
+ to: {
+ y: 150
+ }
+}).animate({
+ to: {
+ backgroundColor: '#f00' //red
+ }
+}).animate({
+ to: {
+ opacity: 0
+ }
+});
+</code></pre>
+
+<p>You can change this behavior by calling the <a href="Ext.util.Animate.html#syncFx" rel="Ext.util.Animate#syncFx" class="docClass">syncFx</a> method and all
+subsequent animations for the specified target will be run concurrently (at the same time).</p>
+
+<pre class="prettyprint"><code>p1.syncFx(); //this will make all animations run at the same time
+
+p1.animate({
+ to: {
+ x: 500
+ }
+}).animate({
+ to: {
+ y: 150
+ }
+}).animate({
+ to: {
+ backgroundColor: '#f00' //red
+ }
+}).animate({
+ to: {
+ opacity: 0
+ }
+});
+</code></pre>
+
+<p>This works the same as:</p>
+
+<pre class="prettyprint"><code>p1.animate({
+ to: {
+ x: 500,
+ y: 150,
+ backgroundColor: '#f00' //red
+ opacity: 0
+ }
+});
+</code></pre>
+
+<p>The <a href="Ext.util.Animate.html#stopAnimation" rel="Ext.util.Animate#stopAnimation" class="docClass">stopAnimation</a> method can be used to stop any
+currently running animations and clear any queued animations.</p>
+
+<h2>Animation Keyframes</h2>
+
+<p>You can also set up complex animations with <a href="Ext.fx.Anim.html#keyframe" rel="Ext.fx.Anim#keyframe" class="docClass">keyframe</a> which follows the
+CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.
+The previous example can be written with the following syntax:</p>
+
+<pre class="prettyprint"><code>p1.animate({
+ duration: 1000, //one second total
+ keyframes: {
+ 25: { //from 0 to 250ms (25%)
+ x: 0
+ },
+ 50: { //from 250ms to 500ms (50%)
+ y: 0
+ },
+ 75: { //from 500ms to 750ms (75%)
+ backgroundColor: '#f00' //red
+ },
+ 100: { //from 750ms to 1sec
+ opacity: 0
+ }
+ }
+});
+</code></pre>
+
+<h2>Animation Events</h2>
+
+<p>Each animation you create has events for <a href="Ext.fx.Anim.html#beforeanimation" rel="Ext.fx.Anim#beforeanimation" class="docClass">beforeanimation</a>,
+<a href="Ext.fx.Anim.html#afteranimate" rel="Ext.fx.Anim#afteranimate" class="docClass">afteranimate</a>, and <a href="Ext.fx.Anim.html#lastframe" rel="Ext.fx.Anim#lastframe" class="docClass">lastframe</a>.<br/>
+Keyframed animations adds an additional <a href="Ext.fx.Animator.html#keyframe" rel="Ext.fx.Animator#keyframe" class="docClass">keyframe</a> event which
+fires for each keyframe in your animation.</p>
+
+<p>All animations support the <a href="Ext.util.Observable.html#listeners" rel="Ext.util.Observable#listeners" class="docClass">listeners</a> configuration to attact functions to these events.</p>
+
+<pre class="prettyprint"><code>startAnimate: function() {
+ var p1 = Ext.get('myElementId');
+ p1.animate({
+ duration: 100,
+ to: {
+ opacity: 0
+ },
+ listeners: {
+ beforeanimate: function() {
+ // Execute my custom method before the animation
+ this.myBeforeAnimateFn();
+ },
+ afteranimate: function() {
+ // Execute my custom method after the animation
+ this.myAfterAnimateFn();
+ },
+ scope: this
+ });
+},
+myBeforeAnimateFn: function() {
+ // My custom logic
+},
+myAfterAnimateFn: function() {
+ // My custom logic
+}
+</code></pre>
+
+<p>Due to the fact that animations run asynchronously, you can determine if an animation is currently
+running on any target by using the <a href="Ext.util.Animate.html#getActiveAnimation" rel="Ext.util.Animate#getActiveAnimation" class="docClass">getActiveAnimation</a>
+method. This method will return false if there are no active animations or return the currently
+running <a href="Ext.fx.Anim.html" rel="Ext.fx.Anim" class="docClass">Ext.fx.Anim</a> instance.</p>
+
+<p>In this example, we're going to wait for the current animation to finish, then stop any other
+queued animations before we fade our element's opacity to 0:</p>
+
+<pre class="prettyprint"><code>var curAnim = p1.getActiveAnimation();
+if (curAnim) {
+ curAnim.on('afteranimate', function() {
+ p1.stopAnimation();
+ p1.animate({
+ to: {
+ opacity: 0
+ }
+ });
+ });
+}
+</code></pre>
+<div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-hasActiveFx" class="member f ni"><a href="Ext.util.Animate.html#property-hasActiveFx" rel="property-hasActiveFx" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-hasActiveFx" class="viewSource">view source</a></div><a name="hasActiveFx"></a><a name="property-hasActiveFx"></a><a href="Ext.util.Animate.html#" rel="property-hasActiveFx" class="cls expand">hasActiveFx</a><span> : Object</span></div><div class="description"><div class="short">@deprecated 4.0 Replaced by getActiveAnimation
+Returns thq current animation if this object has any effects actively ...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.util.Animate.html#getActiveAnimation" rel="Ext.util.Animate#getActiveAnimation" class="docClass">getActiveAnimation</a>
+Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+</div></div></div><div id="property-stopFx" class="member ni"><a href="Ext.util.Animate.html#property-stopFx" rel="property-stopFx" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-stopFx" class="viewSource">view source</a></div><a name="stopFx"></a><a name="property-stopFx"></a><a href="Ext.util.Animate.html#" rel="property-stopFx" class="cls expand">stopFx</a><span> : Object</span></div><div class="description"><div class="short">Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that ...</div><div class="long"><p>Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that haven't started yet.</p>
+</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-animate" class="member f ni"><a href="Ext.util.Animate.html#method-animate" rel="method-animate" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-animate" class="viewSource">view source</a></div><a name="animate"></a><a name="method-animate"></a><a href="Ext.util.Animate.html#" rel="method-animate" class="cls expand">animate</a>(
+<span class="pre">Object config</span>)
+ : Object</div><div class="description"><div class="short">Perform custom animation on this object.
+This method is applicable to both the the Component class and the Element cl...</div><div class="long"><p>Perform custom animation on this object.<p>
+<p>This method is applicable to both the the <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a> class and the <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a> class.
+It performs animated transitions of certain properties of this object over a specified timeline.</p>
+<p>The sole parameter is an object which specifies start property values, end property values, and properties which
+describe the timeline. Of the properties listed below, only <b><code>to</code></b> is mandatory.</p>
+<p>Properties include<ul>
+<li><code>from</code> <div class="sub-desc">An object which specifies start values for the properties being animated.
+If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon
+ths object being animated. See the sections below on Element and Component animation.<div></li>
+<li><code>to</code> <div class="sub-desc">An object which specifies end values for the properties being animated.</div></li>
+<li><code>duration</code><div class="sub-desc">The duration <b>in milliseconds</b> for which the animation will run.</div></li>
+<li><code>easing</code> <div class="sub-desc">A string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:<code><ul>
+<li>ease</li>
+<li>easeIn</li>
+<li>easeOut</li>
+<li>easeInOut</li>
+<li>backIn</li>
+<li>backOut</li>
+<li>elasticIn</li>
+<li>elasticOut</li>
+<li>bounceIn</li>
+<li>bounceOut</li>
+</ul></code></div></li>
+<li><code>keyframes</code> <div class="sub-desc">This is an object which describes the state of animated properties at certain points along the timeline.
+it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.</div></li>
+<li><code>listeners</code> <div class="sub-desc">This is a standard <a href="Ext.util.Observable.html#listeners" rel="Ext.util.Observable#listeners" class="docClass">listeners</a> configuration object which may be used
+to inject behaviour at either the <code>beforeanimate</code> event or the <code>afteranimate</code> event.</div></li>
+</ul></p>
+<h3>Animating an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a></h3>
+When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
+<li><code>x</code> <div class="sub-desc">The page X position in pixels.</div></li>
+<li><code>y</code> <div class="sub-desc">The page Y position in pixels</div></li>
+<li><code>left</code> <div class="sub-desc">The element's CSS <code>left</code> value. Units must be supplied.</div></li>
+<li><code>top</code> <div class="sub-desc">The element's CSS <code>top</code> value. Units must be supplied.</div></li>
+<li><code>width</code> <div class="sub-desc">The element's CSS <code>width</code> value. Units must be supplied.</div></li>
+<li><code>height</code> <div class="sub-desc">The element's CSS <code>height</code> value. Units must be supplied.</div></li>
+<li><code>scrollLeft</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
+<li><code>scrollTop</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
+<li><code>opacity</code> <div class="sub-desc">The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</div></li>
+</ul>
+<p><b>Be aware than animating an Element which is being used by an <a href="Ext.html" rel="Ext" class="docClass">Ext</a> Component without in some way informing the Component about the changed element state
+will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to
+directly animate certain properties of Components.</b></p>
+<h3>Animating a <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a></h3>
+When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
+<li><code>x</code> <div class="sub-desc">The Component's page X position in pixels.</div></li>
+<li><code>y</code> <div class="sub-desc">The Component's page Y position in pixels</div></li>
+<li><code>left</code> <div class="sub-desc">The Component's <code>left</code> value in pixels.</div></li>
+<li><code>top</code> <div class="sub-desc">The Component's <code>top</code> value in pixels.</div></li>
+<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
+<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
+<li><code>dynamic</code> <div class="sub-desc">Specify as true to update the Component's layout (if it is a Container) at every frame
+of the animation. <i>Use sparingly as laying out on every intermediate size change is an expensive operation</i>.</div></li>
+</ul>
+<p>For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:</p>
+<pre><code>myWindow = Ext.create('Ext.window.Window', {
+ title: 'Test Component animation',
+ width: 500,
+ height: 300,
+ layout: {
+ type: 'hbox',
+ align: 'stretch'
+ },
+ items: [{
+ title: 'Left: 33%',
+ margins: '5 0 5 5',
+ flex: 1
+ }, {
+ title: 'Left: 66%',
+ margins: '5 5 5 5',
+ flex: 2
+ }]
+});
+myWindow.show();
+myWindow.header.el.on('click', function() {
+ myWindow.animate({
+ to: {
+ width: (myWindow.getWidth() == 500) ? 700 : 500,
+ height: (myWindow.getHeight() == 300) ? 400 : 300,
+ }
+ });
+});
+</code></pre>
+<p>For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child
+Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation.</p>
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>An object containing properties which describe the animation's start and end states, and the timeline of the animation.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span> <p>this</p>
+</li></ul></div></div></div><div id="method-getActiveAnimation" class="member ni"><a href="Ext.util.Animate.html#method-getActiveAnimation" rel="method-getActiveAnimation" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-getActiveAnimation" class="viewSource">view source</a></div><a name="getActiveAnimation"></a><a name="method-getActiveAnimation"></a><a href="Ext.util.Animate.html#" rel="method-getActiveAnimation" class="cls expand">getActiveAnimation</a> : Mixed</div><div class="description"><div class="short"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+</div><div class="long"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Mixed</span> <p>anim if element has active effects, else false</p>
+</li></ul></div></div></div><div id="method-sequenceFx" class="member ni"><a href="Ext.util.Animate.html#method-sequenceFx" rel="method-sequenceFx" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-sequenceFx" class="viewSource">view source</a></div><a name="sequenceFx"></a><a name="method-sequenceFx"></a><a href="Ext.util.Animate.html#" rel="method-sequenceFx" class="cls expand">sequenceFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after sequenceFx is called on this object are
+run in sequence. This is the opposite ...</div><div class="long"><p>Ensures that all effects queued after sequenceFx is called on this object are
+run in sequence. This is the opposite of <a href="Ext.util.Animate.html#syncFx" rel="Ext.util.Animate#syncFx" class="docClass">syncFx</a>.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span> <p>The Element</p>
+</li></ul></div></div></div><div id="method-stopAnimation" class="member ni"><a href="Ext.util.Animate.html#method-stopAnimation" rel="method-stopAnimation" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-stopAnimation" class="viewSource">view source</a></div><a name="stopAnimation"></a><a name="method-stopAnimation"></a><a href="Ext.util.Animate.html#" rel="method-stopAnimation" class="cls expand">stopAnimation</a> : Ext.core.Element</div><div class="description"><div class="short">@deprecated 4.0 Replaced by stopAnimation
+Stops any running effects and clears this object's internal effects queue i...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.util.Animate.html#stopAnimation" rel="Ext.util.Animate#stopAnimation" class="docClass">stopAnimation</a>
+Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that haven't started yet.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span> <p>The Element</p>
+</li></ul></div></div></div><div id="method-syncFx" class="member ni"><a href="Ext.util.Animate.html#method-syncFx" rel="method-syncFx" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-syncFx" class="viewSource">view source</a></div><a name="syncFx"></a><a name="method-syncFx"></a><a href="Ext.util.Animate.html#" rel="method-syncFx" class="cls expand">syncFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after syncFx is called on this object are
+run concurrently. This is the opposite of ...</div><div class="long"><p>Ensures that all effects queued after syncFx is called on this object are
+run concurrently. This is the opposite of <a href="Ext.util.Animate.html#sequenceFx" rel="Ext.util.Animate#sequenceFx" class="docClass">sequenceFx</a>.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span> <p>The Element</p>
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff