458 lines
No EOL
23 KiB
HTML
458 lines
No EOL
23 KiB
HTML
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>YAHOO.ext.Animator</title>
|
|
<link rel="stylesheet" type="text/css" href="../resources/reset.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/>
|
|
<link rel="stylesheet" type="text/css" href="../resources/print.css" media="print">
|
|
</head>
|
|
<body>
|
|
<div class="body-wrap">
|
|
<div class="top-tools"><img src="../resources/print.gif" width="16" height="16" align="absmiddle"> <a href="YAHOO.ext.Animator.html" target="_blank">Print Friendly</a></div>
|
|
<h1>Class YAHOO.ext.Animator</h1>
|
|
<table cellspacing="0">
|
|
<tr><td class="label">Package:</td><td>YAHOO.ext</td></tr>
|
|
<tr><td class="label">Class:</td><td>Animator</td></tr>
|
|
<tr><td class="label">Extends:</td><td>Object</td></tr>
|
|
<tr><td class="label">Defined In:</td><td><a href="Animator.js.html">Animator.js</a></td></tr>
|
|
</table>
|
|
<div class="description">
|
|
Provides support for syncing animations for multiple <a href="YAHOO.ext.Actor.html">YAHOO.ext.Actor</a>s.<br><br>
|
|
<br><br>This example can be seen in action <a href="http://www.jackslocum.com/yui/2006/08/19/a-splitbar-component-for-yahoo-ui/" target="_new">here</a>
|
|
by clicking on "Click here and I will point it out" at the end of the first paragraph.<br>
|
|
<pre><code>
|
|
var animator = new YAHOO.ext.Animator();
|
|
var cursor = new YAHOO.ext.Actor('cursor-img', animator);
|
|
var click = new YAHOO.ext.Actor('click-img', animator);
|
|
var resize = new YAHOO.ext.Actor('resize-img', animator);
|
|
|
|
// start capturing
|
|
animator.startCapture();
|
|
|
|
// these animations will be run in sequence
|
|
cursor.show();
|
|
cursor.moveTo(500,400);
|
|
cursor.moveTo(20, getEl('navbar').getY()+10, true, .75);
|
|
click.show();
|
|
click.alignTo(cursor, 'tl', [-4, -4]);
|
|
|
|
// Add an async function call, pass callback to argument 1
|
|
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);
|
|
|
|
// pause .5 seconds
|
|
animator.pause(.5);
|
|
|
|
// again, these animations will be run in sequence
|
|
click.hide(true, .7);
|
|
cursor.alignTo('splitter', 'tr', [0, +100], true, 1);
|
|
resize.alignTo('splitter', 'tr', [-12, +100]);
|
|
|
|
// start sync block: these animations will run at the same time
|
|
animator.beginSync();
|
|
cursor.hide();
|
|
resize.show();
|
|
animator.endSync();
|
|
|
|
// play the captured animation sequences, call myCallback when done
|
|
animator.play(myCallback);
|
|
</code></pre> </div>
|
|
<hr />
|
|
<a name="properties"></a>
|
|
<h2>Public Properties</h2>
|
|
<div class="no-members">This class has no public properties.</div> <a name="methods"></a>
|
|
<h2>Public Methods</h2>
|
|
<table cellspacing="0" class="member-table">
|
|
<tr>
|
|
<th class="sig-header" colspan="2">Method</th>
|
|
<th class="msource-header">Defined By</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#Animator">Animator</a>(<code>String/HTMLElement el</code>, <span class="optional" title="Optional">[<code>YAHOO.ext.Animator animator</code>]</span>, <span class="optional" title="Optional">[<code>Boolean selfCapture</code>]</span>)</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc"></td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#addActor">addActor</a>(<code>YAHOO.ext.Actor actor</code>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Add an actor. The actor is also set to capturing = true.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#addAsyncCall">addAsyncCall</a>(<code>Function fcn</code>, <code>Number callbackIndex</code>, <span class="optional" title="Optional">[<code>Array args</code>]</span>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Add an async function call to the playlist.</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#addCall">addCall</a>(<code>Function fcn</code>, <span class="optional" title="Optional">[<code>Array args</code>]</span>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Add a function call to the playlist.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#beginSync">beginSync</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Start a multi-actor sync block. By default all animations are run in sequence. While in the sync block
|
|
each actor's o...</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#clear">clear</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Clear the playlist</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#endSync">endSync</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">End the multi-actor sync block</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#isCapturing">isCapturing</a>(<code>YAHOO.ext.Actor actor</code>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Checks whether this animator is listening to a specific actor.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#isPlaying">isPlaying</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Check if this animator is currently playing</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#pause">pause</a>(<code>Number seconds</code>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Add a pause to the playlist (in seconds)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#play">play</a>(<span class="optional" title="Optional">[<code>Function oncomplete</code>]</span>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Starts playback of the playlist, also stops any capturing. To start capturing again call <a href="#startCapture">startCapture</a>.</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#select<static>">select<static></a>(<code>String/Array selector</code>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc"><static> Static function to build a AnimatorComposite from a css selector (requires YAHOO.ext.Element.selectorF...</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#startCapture">startCapture</a>(<span class="optional" title="Optional">[<code>Boolean clearPlaylist</code>]</span>) : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Start capturing actions on the added actors.</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#stop">stop</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr class="alt">
|
|
<td class="mdesc">Stop at the next available stopping point</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="micon" rowspan="2"> </td>
|
|
<td class="sig"><a class="mlink" href="#stopCapture">stopCapture</a>() : void</td>
|
|
<td class="msource" rowspan="2">Animator</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdesc">Stop capturing on all added actors.</td>
|
|
</tr>
|
|
</table>
|
|
<a name="events"></a>
|
|
<h2>Public Events</h2>
|
|
<div class="no-members">This class has no public events.</div>
|
|
|
|
<a name="Animator"></a>
|
|
<h2 class="mdetail-head">Constructor Details</h2>
|
|
<div class="detail-wrap">
|
|
<div class="mdetail">
|
|
<h3>Animator</i></h3>
|
|
<code>public function Animator(<code>String/HTMLElement el</code>, <span class="optional" title="Optional">[<code>YAHOO.ext.Animator animator</code>]</span>, <span class="optional" title="Optional">[<code>Boolean selfCapture</code>]</span>)</code>
|
|
<div class="mdetail-desc">
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">The dom element or element id</div></li><li><code>animator</code> : YAHOO.ext.Animator<div class="sub-desc">(optional) The Animator that will capture this Actor's actions</div></li><li><code>selfCapture</code> : Boolean<div class="sub-desc">(optional) Whether this actor should capture it's own actions to support self playback without an animator (defaults to false)</div></li> </ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="mdetail-head">Method Details</h2>
|
|
<div class="detail-wrap">
|
|
<a name="addActor"></a>
|
|
<div class="mdetail">
|
|
<h3>addActor</i></h3>
|
|
<code>public function addActor(<code>YAHOO.ext.Actor actor</code>)</code>
|
|
<div class="mdetail-desc">
|
|
Add an actor. The actor is also set to capturing = true.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>actor</code> : YAHOO.ext.Actor<div class="sub-desc"></div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="addAsyncCall"></a>
|
|
<div class="mdetail alt">
|
|
<h3>addAsyncCall</i></h3>
|
|
<code>public function addAsyncCall(<code>Function fcn</code>, <code>Number callbackIndex</code>, <span class="optional" title="Optional">[<code>Array args</code>]</span>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>)</code>
|
|
<div class="mdetail-desc">
|
|
Add an async function call to the playlist.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>fcn</code> : Function<div class="sub-desc">The function to call</div></li><li><code>callbackIndex</code> : Number<div class="sub-desc">The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED.</div></li><li><code>args</code> : Array<div class="sub-desc">The arguments to call the function with</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope of the function</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="addCall"></a>
|
|
<div class="mdetail">
|
|
<h3>addCall</i></h3>
|
|
<code>public function addCall(<code>Function fcn</code>, <span class="optional" title="Optional">[<code>Array args</code>]</span>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>)</code>
|
|
<div class="mdetail-desc">
|
|
Add a function call to the playlist.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>fcn</code> : Function<div class="sub-desc">The function to call</div></li><li><code>args</code> : Array<div class="sub-desc">The arguments to call the function with</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope of the function</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="beginSync"></a>
|
|
<div class="mdetail alt">
|
|
<h3>beginSync</i></h3>
|
|
<code>public function beginSync()</code>
|
|
<div class="mdetail-desc">
|
|
Start a multi-actor sync block. By default all animations are run in sequence. While in the sync block
|
|
each actor's own animations will still be sequenced, but all actors will animate at the same time.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="clear"></a>
|
|
<div class="mdetail">
|
|
<h3>clear</i></h3>
|
|
<code>public function clear()</code>
|
|
<div class="mdetail-desc">
|
|
Clear the playlist
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="endSync"></a>
|
|
<div class="mdetail alt">
|
|
<h3>endSync</i></h3>
|
|
<code>public function endSync()</code>
|
|
<div class="mdetail-desc">
|
|
End the multi-actor sync block
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="isCapturing"></a>
|
|
<div class="mdetail">
|
|
<h3>isCapturing</i></h3>
|
|
<code>public function isCapturing(<code>YAHOO.ext.Actor actor</code>)</code>
|
|
<div class="mdetail-desc">
|
|
Checks whether this animator is listening to a specific actor.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>actor</code> : YAHOO.ext.Actor<div class="sub-desc"></div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="isPlaying"></a>
|
|
<div class="mdetail alt">
|
|
<h3>isPlaying</i></h3>
|
|
<code>public function isPlaying()</code>
|
|
<div class="mdetail-desc">
|
|
Check if this animator is currently playing
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="pause"></a>
|
|
<div class="mdetail">
|
|
<h3>pause</i></h3>
|
|
<code>public function pause(<code>Number seconds</code>)</code>
|
|
<div class="mdetail-desc">
|
|
Add a pause to the playlist (in seconds)
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>seconds</code> : Number<div class="sub-desc">The number of seconds to pause.</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="play"></a>
|
|
<div class="mdetail alt">
|
|
<h3>play</i></h3>
|
|
<code>public function play(<span class="optional" title="Optional">[<code>Function oncomplete</code>]</span>)</code>
|
|
<div class="mdetail-desc">
|
|
Starts playback of the playlist, also stops any capturing. To start capturing again call <a href="#startCapture">startCapture</a>.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>oncomplete</code> : Function<div class="sub-desc">(optional) Callback to execute when playback has completed</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="select<static>"></a>
|
|
<div class="mdetail">
|
|
<h3>select<static></i></h3>
|
|
<code>public function select<static>(<code>String/Array selector</code>)</code>
|
|
<div class="mdetail-desc">
|
|
<static> Static function to build a AnimatorComposite from a css selector (requires YAHOO.ext.Element.selectorFunction be defined)
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>selector</code> : String/Array<div class="sub-desc">The css selector or an array of nodes to animate</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="startCapture"></a>
|
|
<div class="mdetail alt">
|
|
<h3>startCapture</i></h3>
|
|
<code>public function startCapture(<span class="optional" title="Optional">[<code>Boolean clearPlaylist</code>]</span>)</code>
|
|
<div class="mdetail-desc">
|
|
Start capturing actions on the added actors.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li><code>clearPlaylist</code> : Boolean<div class="sub-desc">Whether to also create a new playlist</div></li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="stop"></a>
|
|
<div class="mdetail">
|
|
<h3>stop</i></h3>
|
|
<code>public function stop()</code>
|
|
<div class="mdetail-desc">
|
|
Stop at the next available stopping point
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
<a name="stopCapture"></a>
|
|
<div class="mdetail alt">
|
|
<h3>stopCapture</i></h3>
|
|
<code>public function stopCapture()</code>
|
|
<div class="mdetail-desc">
|
|
Stop capturing on all added actors.
|
|
<div class="mdetail-params">
|
|
<strong>Parameters:</strong>
|
|
<ul><li>None.</li> </ul>
|
|
<strong>Returns:</strong>
|
|
<ul>
|
|
<li><code>void</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mdetail-def">This method is defined by Animator.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<hr>
|
|
Copyright © 2006 Jack Slocum. All rights reserved.
|
|
</body>
|
|
</html>
|
|
|