anim.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. // Copyright 2006 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Basic animation controls.
  16. *
  17. * @author arv@google.com (Erik Arvidsson)
  18. */
  19. goog.provide('goog.fx.anim');
  20. goog.provide('goog.fx.anim.Animated');
  21. goog.require('goog.async.AnimationDelay');
  22. goog.require('goog.async.Delay');
  23. goog.require('goog.object');
  24. /**
  25. * An interface for programatically animated objects. I.e. rendered in
  26. * javascript frame by frame.
  27. *
  28. * @interface
  29. */
  30. goog.fx.anim.Animated = function() {};
  31. /**
  32. * Function called when a frame is requested for the animation.
  33. *
  34. * @param {number} now Current time in milliseconds.
  35. */
  36. goog.fx.anim.Animated.prototype.onAnimationFrame;
  37. /**
  38. * Default wait timeout for animations (in milliseconds). Only used for timed
  39. * animation, which uses a timer (setTimeout) to schedule animation.
  40. *
  41. * @type {number}
  42. * @const
  43. */
  44. goog.fx.anim.TIMEOUT = goog.async.AnimationDelay.TIMEOUT;
  45. /**
  46. * A map of animations which should be cycled on the global timer.
  47. *
  48. * @type {!Object<number, goog.fx.anim.Animated>}
  49. * @private
  50. */
  51. goog.fx.anim.activeAnimations_ = {};
  52. /**
  53. * An optional animation window.
  54. * @type {Window}
  55. * @private
  56. */
  57. goog.fx.anim.animationWindow_ = null;
  58. /**
  59. * An interval ID for the global timer or event handler uid.
  60. * @type {goog.async.Delay|goog.async.AnimationDelay}
  61. * @private
  62. */
  63. goog.fx.anim.animationDelay_ = null;
  64. /**
  65. * Registers an animation to be cycled on the global timer.
  66. * @param {goog.fx.anim.Animated} animation The animation to register.
  67. */
  68. goog.fx.anim.registerAnimation = function(animation) {
  69. var uid = goog.getUid(animation);
  70. if (!(uid in goog.fx.anim.activeAnimations_)) {
  71. goog.fx.anim.activeAnimations_[uid] = animation;
  72. }
  73. // If the timer is not already started, start it now.
  74. goog.fx.anim.requestAnimationFrame_();
  75. };
  76. /**
  77. * Removes an animation from the list of animations which are cycled on the
  78. * global timer.
  79. * @param {goog.fx.anim.Animated} animation The animation to unregister.
  80. */
  81. goog.fx.anim.unregisterAnimation = function(animation) {
  82. var uid = goog.getUid(animation);
  83. delete goog.fx.anim.activeAnimations_[uid];
  84. // If a timer is running and we no longer have any active timers we stop the
  85. // timers.
  86. if (goog.object.isEmpty(goog.fx.anim.activeAnimations_)) {
  87. goog.fx.anim.cancelAnimationFrame_();
  88. }
  89. };
  90. /**
  91. * Tears down this module. Useful for testing.
  92. */
  93. // TODO(nicksantos): Wow, this api is pretty broken. This should be fixed.
  94. goog.fx.anim.tearDown = function() {
  95. goog.fx.anim.animationWindow_ = null;
  96. goog.dispose(goog.fx.anim.animationDelay_);
  97. goog.fx.anim.animationDelay_ = null;
  98. goog.fx.anim.activeAnimations_ = {};
  99. };
  100. /**
  101. * Registers an animation window. This allows usage of the timing control API
  102. * for animations. Note that this window must be visible, as non-visible
  103. * windows can potentially stop animating. This window does not necessarily
  104. * need to be the window inside which animation occurs, but must remain visible.
  105. * See: https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame.
  106. *
  107. * @param {Window} animationWindow The window in which to animate elements.
  108. */
  109. goog.fx.anim.setAnimationWindow = function(animationWindow) {
  110. // If a timer is currently running, reset it and restart with new functions
  111. // after a timeout. This is to avoid mismatching timer UIDs if we change the
  112. // animation window during a running animation.
  113. //
  114. // In practice this cannot happen before some animation window and timer
  115. // control functions has already been set.
  116. var hasTimer =
  117. goog.fx.anim.animationDelay_ && goog.fx.anim.animationDelay_.isActive();
  118. goog.dispose(goog.fx.anim.animationDelay_);
  119. goog.fx.anim.animationDelay_ = null;
  120. goog.fx.anim.animationWindow_ = animationWindow;
  121. // If the timer was running, start it again.
  122. if (hasTimer) {
  123. goog.fx.anim.requestAnimationFrame_();
  124. }
  125. };
  126. /**
  127. * Requests an animation frame based on the requestAnimationFrame and
  128. * cancelRequestAnimationFrame function pair.
  129. * @private
  130. */
  131. goog.fx.anim.requestAnimationFrame_ = function() {
  132. if (!goog.fx.anim.animationDelay_) {
  133. // We cannot guarantee that the global window will be one that fires
  134. // requestAnimationFrame events (consider off-screen chrome extension
  135. // windows). Default to use goog.async.Delay, unless
  136. // the client has explicitly set an animation window.
  137. if (goog.fx.anim.animationWindow_) {
  138. // requestAnimationFrame will call cycleAnimations_ with the current
  139. // time in ms, as returned from goog.now().
  140. goog.fx.anim.animationDelay_ =
  141. new goog.async.AnimationDelay(function(now) {
  142. goog.fx.anim.cycleAnimations_(now);
  143. }, goog.fx.anim.animationWindow_);
  144. } else {
  145. goog.fx.anim.animationDelay_ = new goog.async.Delay(function() {
  146. goog.fx.anim.cycleAnimations_(goog.now());
  147. }, goog.fx.anim.TIMEOUT);
  148. }
  149. }
  150. var delay = goog.fx.anim.animationDelay_;
  151. if (!delay.isActive()) {
  152. delay.start();
  153. }
  154. };
  155. /**
  156. * Cancels an animation frame created by requestAnimationFrame_().
  157. * @private
  158. */
  159. goog.fx.anim.cancelAnimationFrame_ = function() {
  160. if (goog.fx.anim.animationDelay_) {
  161. goog.fx.anim.animationDelay_.stop();
  162. }
  163. };
  164. /**
  165. * Cycles through all registered animations.
  166. * @param {number} now Current time in milliseconds.
  167. * @private
  168. */
  169. goog.fx.anim.cycleAnimations_ = function(now) {
  170. goog.object.forEach(goog.fx.anim.activeAnimations_, function(anim) {
  171. anim.onAnimationFrame(now);
  172. });
  173. if (!goog.object.isEmpty(goog.fx.anim.activeAnimations_)) {
  174. goog.fx.anim.requestAnimationFrame_();
  175. }
  176. };