yui/docs/AnimMgr.js.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4         <title>API: animation   AnimMgr.js  (YUI Library)</title>
   5         <link rel="stylesheet" type="text/css" href="assets/api.css">
   6 </head>
   7
   8 <body id="yahoo-com">
   9 <div id="doc3" class="yui-t2">
  10
  11         <div id="hd">
  12         <h1>Yahoo! UI Library</h1>
  13         <h3>animation&nbsp; <span class="subtitle">2.2.0</span></h3>
  14         <p>
  15         <a href="./index.html">Yahoo! UI Library</a>
  16             &gt; <a href="./module_animation.html">animation</a>
  17
  18                  &gt; AnimMgr.js (source view)
  19             </p>
  20         </div>
  21
  22         <div id="bd">
  23                 <div id="yui-main">
  24                         <div class="yui-b">
  25
  26                     <div id="srcout">
  27 <div class="highlight" ><pre><span class="c">/**</span>
  28 <span class="c"> * Handles animation queueing and threading.</span>
  29 <span class="c"> * Used by Anim and subclasses.</span>
  30 <span class="c"> * @class AnimMgr</span>
  31 <span class="c"> * @namespace YAHOO.util</span>
  32 <span class="c"> */</span>
  33 <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">AnimMgr</span> <span class="o">=</span> <span class="k">new</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
  34     <span class="c">/** </span>
  35 <span class="c">     * Reference to the animation Interval.</span>
  36 <span class="c">     * @property thread</span>
  37 <span class="c">     * @private</span>
  38 <span class="c">     * @type Int</span>
  39 <span class="c">     */</span>
  40     <span class="k">var</span> <span class="nx">thread</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span>
  41
  42     <span class="c">/** </span>
  43 <span class="c">     * The current queue of registered animation objects.</span>
  44 <span class="c">     * @property queue</span>
  45 <span class="c">     * @private</span>
  46 <span class="c">     * @type Array</span>
  47 <span class="c">     */</span>
  48     <span class="k">var</span> <span class="nx">queue</span> <span class="o">=</span> <span class="o">[];</span>
  49
  50     <span class="c">/** </span>
  51 <span class="c">     * The number of active animations.</span>
  52 <span class="c">     * @property tweenCount</span>
  53 <span class="c">     * @private</span>
  54 <span class="c">     * @type Int</span>
  55 <span class="c">     */</span>
  56     <span class="k">var</span> <span class="nx">tweenCount</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
  57
  58     <span class="c">/** </span>
  59 <span class="c">     * Base frame rate (frames per second). </span>
  60 <span class="c">     * Arbitrarily high for better x-browser calibration (slower browsers drop more frames).</span>
  61 <span class="c">     * @property fps</span>
  62 <span class="c">     * @type Int</span>
  63 <span class="c">     * </span>
  64 <span class="c">     */</span>
  65     <span class="k">this</span><span class="o">.</span><span class="nx">fps</span> <span class="o">=</span> <span class="m">1000</span><span class="o">;</span>
  66
  67     <span class="c">/** </span>
  68 <span class="c">     * Interval delay in milliseconds, defaults to fastest possible.</span>
  69 <span class="c">     * @property delay</span>
  70 <span class="c">     * @type Int</span>
  71 <span class="c">     * </span>
  72 <span class="c">     */</span>
  73     <span class="k">this</span><span class="o">.</span><span class="nx">delay</span> <span class="o">=</span> <span class="m">1</span><span class="o">;</span>
  74
  75     <span class="c">/**</span>
  76 <span class="c">     * Adds an animation instance to the animation queue.</span>
  77 <span class="c">     * All animation instances must be registered in order to animate.</span>
  78 <span class="c">     * @method registerElement</span>
  79 <span class="c">     * @param {object} tween The Anim instance to be be registered</span>
  80 <span class="c">     */</span>
  81     <span class="k">this</span><span class="o">.</span><span class="nx">registerElement</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">tween</span><span class="o">)</span> <span class="o">{</span>
  82         <span class="nx">queue</span><span class="o">[</span><span class="nx">queue</span><span class="o">.</span><span class="nx">length</span><span class="o">]</span> <span class="o">=</span> <span class="nx">tween</span><span class="o">;</span>
  83         <span class="nx">tweenCount</span> <span class="o">+=</span> <span class="m">1</span><span class="o">;</span>
  84         <span class="nx">tween</span><span class="o">.</span><span class="nx">_onStart</span><span class="o">.</span><span class="nx">fire</span><span class="o">();</span>
  85         <span class="k">this</span><span class="o">.</span><span class="nx">start</span><span class="o">();</span>
  86     <span class="o">};</span>
  87
  88     <span class="c">/**</span>
  89 <span class="c">     * removes an animation instance from the animation queue.</span>
  90 <span class="c">     * All animation instances must be registered in order to animate.</span>
  91 <span class="c">     * @method unRegister</span>
  92 <span class="c">     * @param {object} tween The Anim instance to be be registered</span>
  93 <span class="c">     * @param {Int} index The index of the Anim instance</span>
  94 <span class="c">     * @private</span>
  95 <span class="c">     */</span>
  96     <span class="k">this</span><span class="o">.</span><span class="nx">unRegister</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">tween</span><span class="o">,</span> <span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
  97         <span class="nx">tween</span><span class="o">.</span><span class="nx">_onComplete</span><span class="o">.</span><span class="nx">fire</span><span class="o">();</span>
  98         <span class="nx">index</span> <span class="o">=</span> <span class="nx">index</span> <span class="o">||</span> <span class="nx">getIndex</span><span class="o">(</span><span class="nx">tween</span><span class="o">);</span>
  99         <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">!=</span> <span class="o">-</span><span class="m">1</span><span class="o">)</span> <span class="o">{</span>
 100             <span class="nx">queue</span><span class="o">.</span><span class="nx">splice</span><span class="o">(</span><span class="nx">index</span><span class="o">,</span> <span class="m">1</span><span class="o">);</span>
 101         <span class="o">}</span>
 102
 103         <span class="nx">tweenCount</span> <span class="o">-=</span> <span class="m">1</span><span class="o">;</span>
 104         <span class="k">if</span> <span class="o">(</span><span class="nx">tweenCount</span> <span class="o">&lt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
 105             <span class="k">this</span><span class="o">.</span><span class="nx">stop</span><span class="o">();</span>
 106         <span class="o">}</span>
 107     <span class="o">};</span>
 108
 109     <span class="c">/**</span>
 110 <span class="c">     * Starts the animation thread.</span>
 111 <span class="c">        * Only one thread can run at a time.</span>
 112 <span class="c">     * @method start</span>
 113 <span class="c">     */</span>
 114     <span class="k">this</span><span class="o">.</span><span class="nx">start</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
 115         <span class="k">if</span> <span class="o">(</span><span class="nx">thread</span> <span class="o">===</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span>
 116             <span class="nx">thread</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">run</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">delay</span><span class="o">);</span>
 117         <span class="o">}</span>
 118     <span class="o">};</span>
 119
 120     <span class="c">/**</span>
 121 <span class="c">     * Stops the animation thread or a specific animation instance.</span>
 122 <span class="c">     * @method stop</span>
 123 <span class="c">     * @param {object} tween A specific Anim instance to stop (optional)</span>
 124 <span class="c">     * If no instance given, Manager stops thread and all animations.</span>
 125 <span class="c">     */</span>
 126     <span class="k">this</span><span class="o">.</span><span class="nx">stop</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">tween</span><span class="o">)</span> <span class="o">{</span>
 127         <span class="k">if</span> <span class="o">(!</span><span class="nx">tween</span><span class="o">)</span> <span class="o">{</span>
 128             <span class="nx">clearInterval</span><span class="o">(</span><span class="nx">thread</span><span class="o">);</span>
 129
 130             <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">queue</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="o">;</span> <span class="o">++</span><span class="nx">i</span><span class="o">)</span> <span class="o">{</span>
 131                 <span class="k">if</span> <span class="o">(</span> <span class="nx">queue</span><span class="o">[</span><span class="m">0</span><span class="o">].</span><span class="nx">isAnimated</span><span class="o">()</span> <span class="o">)</span> <span class="o">{</span>
 132                     <span class="k">this</span><span class="o">.</span><span class="nx">unRegister</span><span class="o">(</span><span class="nx">queue</span><span class="o">[</span><span class="m">0</span><span class="o">],</span> <span class="m">0</span><span class="o">);</span>
 133                 <span class="o">}</span>
 134             <span class="o">}</span>
 135
 136             <span class="nx">queue</span> <span class="o">=</span> <span class="o">[];</span>
 137             <span class="nx">thread</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span>
 138             <span class="nx">tweenCount</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
 139         <span class="o">}</span>
 140         <span class="k">else</span> <span class="o">{</span>
 141             <span class="k">this</span><span class="o">.</span><span class="nx">unRegister</span><span class="o">(</span><span class="nx">tween</span><span class="o">);</span>
 142         <span class="o">}</span>
 143     <span class="o">};</span>
 144
 145     <span class="c">/**</span>
 146 <span class="c">     * Called per Interval to handle each animation frame.</span>
 147 <span class="c">     * @method run</span>
 148 <span class="c">     */</span>
 149     <span class="k">this</span><span class="o">.</span><span class="nx">run</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
 150         <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">queue</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="o">;</span> <span class="o">++</span><span class="nx">i</span><span class="o">)</span> <span class="o">{</span>
 151             <span class="k">var</span> <span class="nx">tween</span> <span class="o">=</span> <span class="nx">queue</span><span class="o">[</span><span class="nx">i</span><span class="o">];</span>
 152             <span class="k">if</span> <span class="o">(</span> <span class="o">!</span><span class="nx">tween</span> <span class="o">||</span> <span class="o">!</span><span class="nx">tween</span><span class="o">.</span><span class="nx">isAnimated</span><span class="o">()</span> <span class="o">)</span> <span class="o">{</span> <span class="k">continue</span><span class="o">;</span> <span class="o">}</span>
 153
 154             <span class="k">if</span> <span class="o">(</span><span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span> <span class="o">&lt;</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">totalFrames</span> <span class="o">||</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">totalFrames</span> <span class="o">===</span> <span class="kc">null</span><span class="o">)</span>
 155             <span class="o">{</span>
 156                 <span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span> <span class="o">+=</span> <span class="m">1</span><span class="o">;</span>
 157
 158                 <span class="k">if</span> <span class="o">(</span><span class="nx">tween</span><span class="o">.</span><span class="nx">useSeconds</span><span class="o">)</span> <span class="o">{</span>
 159                     <span class="nx">correctFrame</span><span class="o">(</span><span class="nx">tween</span><span class="o">);</span>
 160                 <span class="o">}</span>
 161                 <span class="nx">tween</span><span class="o">.</span><span class="nx">_onTween</span><span class="o">.</span><span class="nx">fire</span><span class="o">();</span>
 162             <span class="o">}</span>
 163             <span class="k">else</span> <span class="o">{</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">AnimMgr</span><span class="o">.</span><span class="nx">stop</span><span class="o">(</span><span class="nx">tween</span><span class="o">,</span> <span class="nx">i</span><span class="o">);</span> <span class="o">}</span>
 164         <span class="o">}</span>
 165     <span class="o">};</span>
 166
 167     <span class="k">var</span> <span class="nx">getIndex</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">anim</span><span class="o">)</span> <span class="o">{</span>
 168         <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">queue</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="o">;</span> <span class="o">++</span><span class="nx">i</span><span class="o">)</span> <span class="o">{</span>
 169             <span class="k">if</span> <span class="o">(</span><span class="nx">queue</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">==</span> <span class="nx">anim</span><span class="o">)</span> <span class="o">{</span>
 170                 <span class="k">return</span> <span class="nx">i</span><span class="o">;</span> <span class="c">// note return;</span>
 171 <span class="c"></span>            <span class="o">}</span>
 172         <span class="o">}</span>
 173         <span class="k">return</span> <span class="o">-</span><span class="m">1</span><span class="o">;</span>
 174     <span class="o">};</span>
 175
 176     <span class="c">/**</span>
 177 <span class="c">     * On the fly frame correction to keep animation on time.</span>
 178 <span class="c">     * @method correctFrame</span>
 179 <span class="c">     * @private</span>
 180 <span class="c">     * @param {Object} tween The Anim instance being corrected.</span>
 181 <span class="c">     */</span>
 182     <span class="k">var</span> <span class="nx">correctFrame</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">tween</span><span class="o">)</span> <span class="o">{</span>
 183         <span class="k">var</span> <span class="nx">frames</span> <span class="o">=</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">totalFrames</span><span class="o">;</span>
 184         <span class="k">var</span> <span class="nx">frame</span> <span class="o">=</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span><span class="o">;</span>
 185         <span class="k">var</span> <span class="nx">expected</span> <span class="o">=</span> <span class="o">(</span><span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span> <span class="o">*</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">duration</span> <span class="o">*</span> <span class="m">1000</span> <span class="o">/</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">totalFrames</span><span class="o">);</span>
 186         <span class="k">var</span> <span class="nx">elapsed</span> <span class="o">=</span> <span class="o">(</span><span class="k">new</span> <span class="nb">Date</span><span class="o">()</span> <span class="o">-</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">getStartTime</span><span class="o">());</span>
 187         <span class="k">var</span> <span class="nx">tweak</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
 188
 189         <span class="k">if</span> <span class="o">(</span><span class="nx">elapsed</span> <span class="o">&lt;</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">duration</span> <span class="o">*</span> <span class="m">1000</span><span class="o">)</span> <span class="o">{</span> <span class="c">// check if falling behind</span>
 190 <span class="c"></span>            <span class="nx">tweak</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">((</span><span class="nx">elapsed</span> <span class="o">/</span> <span class="nx">expected</span> <span class="o">-</span> <span class="m">1</span><span class="o">)</span> <span class="o">*</span> <span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span><span class="o">);</span>
 191         <span class="o">}</span> <span class="k">else</span> <span class="o">{</span> <span class="c">// went over duration, so jump to end</span>
 192 <span class="c"></span>            <span class="nx">tweak</span> <span class="o">=</span> <span class="nx">frames</span> <span class="o">-</span> <span class="o">(</span><span class="nx">frame</span> <span class="o">+</span> <span class="m">1</span><span class="o">);</span>
 193         <span class="o">}</span>
 194         <span class="k">if</span> <span class="o">(</span><span class="nx">tweak</span> <span class="o">&gt;</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nb">isFinite</span><span class="o">(</span><span class="nx">tweak</span><span class="o">))</span> <span class="o">{</span> <span class="c">// adjust if needed</span>
 195 <span class="c"></span>            <span class="k">if</span> <span class="o">(</span><span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span> <span class="o">+</span> <span class="nx">tweak</span> <span class="o">&gt;=</span> <span class="nx">frames</span><span class="o">)</span> <span class="o">{</span><span class="c">// dont go past last frame</span>
 196 <span class="c"></span>                <span class="nx">tweak</span> <span class="o">=</span> <span class="nx">frames</span> <span class="o">-</span> <span class="o">(</span><span class="nx">frame</span> <span class="o">+</span> <span class="m">1</span><span class="o">);</span>
 197             <span class="o">}</span>
 198
 199             <span class="nx">tween</span><span class="o">.</span><span class="nx">currentFrame</span> <span class="o">+=</span> <span class="nx">tweak</span><span class="o">;</span>
 200         <span class="o">}</span>
 201     <span class="o">};</span>
 202 <span class="o">};</span>
 203 </pre></div>
 204                     </div>
 205                         </div>
 206                 </div>
 207                 <div class="yui-b">
 208             <div class="nav">
 209
 210                     <div class="module">
 211                         <h4>Modules</h4>
 212                         <ul class="content">
 213
 214                                 <li class="selected"><a href="module_animation.html">animation</a></li>
 215
 216                                 <li class=""><a href="module_autocomplete.html">autocomplete</a></li>
 217
 218                                 <li class=""><a href="module_button.html">button</a></li>
 219
 220                                 <li class=""><a href="module_calendar.html">calendar</a></li>
 221
 222                                 <li class=""><a href="module_connection.html">connection</a></li>
 223
 224                                 <li class=""><a href="module_container.html">container</a></li>
 225
 226                                 <li class=""><a href="module_datasource.html">datasource</a></li>
 227
 228                                 <li class=""><a href="module_datatable.html">datatable</a></li>
 229
 230                                 <li class=""><a href="module_dom.html">dom</a></li>
 231
 232                                 <li class=""><a href="module_dragdrop.html">dragdrop</a></li>
 233
 234                                 <li class=""><a href="module_element.html">element</a></li>
 235
 236                                 <li class=""><a href="module_event.html">event</a></li>
 237
 238                                 <li class=""><a href="module_history.html">history</a></li>
 239
 240                                 <li class=""><a href="module_logger.html">logger</a></li>
 241
 242                                 <li class=""><a href="module_menu.html">menu</a></li>
 243
 244                                 <li class=""><a href="module_slider.html">slider</a></li>
 245
 246                                 <li class=""><a href="module_tabview.html">tabview</a></li>
 247
 248                                 <li class=""><a href="module_treeview.html">treeview</a></li>
 249
 250                                 <li class=""><a href="module_yahoo.html">yahoo</a></li>
 251                         </ul>
 252                     </div>
 253
 254                     <div class="module">
 255                         <h4>Classes</h4>
 256                         <ul class="content">
 257                                 <li class=""><a href="YAHOO.util.Anim.html">YAHOO.util.Anim</a></li>
 258                                 <li class=""><a href="YAHOO.util.AnimMgr.html">YAHOO.util.AnimMgr</a></li>
 259                                 <li class=""><a href="YAHOO.util.Bezier.html">YAHOO.util.Bezier</a></li>
 260                                 <li class=""><a href="YAHOO.util.ColorAnim.html">YAHOO.util.ColorAnim</a></li>
 261                                 <li class=""><a href="YAHOO.util.Easing.html">YAHOO.util.Easing</a></li>
 262                                 <li class=""><a href="YAHOO.util.Motion.html">YAHOO.util.Motion</a></li>
 263                                 <li class=""><a href="YAHOO.util.Scroll.html">YAHOO.util.Scroll</a></li>
 264                         </ul>
 265                     </div>
 266
 267                     <div class="module">
 268                         <h4>Files</h4>
 269                         <ul class="content">
 270                                 <li class=""><a href="Anim.js.html">Anim.js</a></li>
 271                                 <li class="selected"><a href="AnimMgr.js.html">AnimMgr.js</a></li>
 272                                 <li class=""><a href="Bezier.js.html">Bezier.js</a></li>
 273                                 <li class=""><a href="ColorAnim.js.html">ColorAnim.js</a></li>
 274                                 <li class=""><a href="Easing.js.html">Easing.js</a></li>
 275                                 <li class=""><a href="Motion.js.html">Motion.js</a></li>
 276                                 <li class=""><a href="Scroll.js.html">Scroll.js</a></li>
 277                         </ul>
 278                     </div>
 279
 280
 281
 282
 283
 284             </div>
 285                 </div>
 286         </div>
 287         <div id="ft">
 288         <hr />
 289         Copyright &copy; 2007 Yahoo! Inc. All rights reserved.
 290         </div>
 291 </div>
 292 </body>
 293 </html>