Tween.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the Clear BSD license.
  3. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/BaseTypes/Class.js
  7. * @requires OpenLayers/Console.js
  8. */
  9. /**
  10. * Namespace: OpenLayers.Tween
  11. */
  12. OpenLayers.Tween = OpenLayers.Class({
  13. /**
  14. * Constant: INTERVAL
  15. * {int} Interval in milliseconds between 2 steps
  16. */
  17. INTERVAL: 10,
  18. /**
  19. * APIProperty: easing
  20. * {<OpenLayers.Easing>(Function)} Easing equation used for the animation
  21. * Defaultly set to OpenLayers.Easing.Expo.easeOut
  22. */
  23. easing: null,
  24. /**
  25. * APIProperty: begin
  26. * {Object} Values to start the animation with
  27. */
  28. begin: null,
  29. /**
  30. * APIProperty: finish
  31. * {Object} Values to finish the animation with
  32. */
  33. finish: null,
  34. /**
  35. * APIProperty: duration
  36. * {int} duration of the tween (number of steps)
  37. */
  38. duration: null,
  39. /**
  40. * APIProperty: callbacks
  41. * {Object} An object with start, eachStep and done properties whose values
  42. * are functions to be call during the animation. They are passed the
  43. * current computed value as argument.
  44. */
  45. callbacks: null,
  46. /**
  47. * Property: time
  48. * {int} Step counter
  49. */
  50. time: null,
  51. /**
  52. * Property: interval
  53. * {int} Interval id returned by window.setInterval
  54. */
  55. interval: null,
  56. /**
  57. * Property: playing
  58. * {Boolean} Tells if the easing is currently playing
  59. */
  60. playing: false,
  61. /**
  62. * Constructor: OpenLayers.Tween
  63. * Creates a Tween.
  64. *
  65. * Parameters:
  66. * easing - {<OpenLayers.Easing>(Function)} easing function method to use
  67. */
  68. initialize: function(easing) {
  69. this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut;
  70. },
  71. /**
  72. * APIMethod: start
  73. * Plays the Tween, and calls the callback method on each step
  74. *
  75. * Parameters:
  76. * begin - {Object} values to start the animation with
  77. * finish - {Object} values to finish the animation with
  78. * duration - {int} duration of the tween (number of steps)
  79. * options - {Object} hash of options (for example callbacks (start, eachStep, done))
  80. */
  81. start: function(begin, finish, duration, options) {
  82. this.playing = true;
  83. this.begin = begin;
  84. this.finish = finish;
  85. this.duration = duration;
  86. this.callbacks = options.callbacks;
  87. this.time = 0;
  88. if (this.interval) {
  89. window.clearInterval(this.interval);
  90. this.interval = null;
  91. }
  92. if (this.callbacks && this.callbacks.start) {
  93. this.callbacks.start.call(this, this.begin);
  94. }
  95. this.interval = window.setInterval(
  96. OpenLayers.Function.bind(this.play, this), this.INTERVAL);
  97. },
  98. /**
  99. * APIMethod: stop
  100. * Stops the Tween, and calls the done callback
  101. * Doesn't do anything if animation is already finished
  102. */
  103. stop: function() {
  104. if (!this.playing) {
  105. return;
  106. }
  107. if (this.callbacks && this.callbacks.done) {
  108. this.callbacks.done.call(this, this.finish);
  109. }
  110. window.clearInterval(this.interval);
  111. this.interval = null;
  112. this.playing = false;
  113. },
  114. /**
  115. * Method: play
  116. * Calls the appropriate easing method
  117. */
  118. play: function() {
  119. var value = {};
  120. for (var i in this.begin) {
  121. var b = this.begin[i];
  122. var f = this.finish[i];
  123. if (b == null || f == null || isNaN(b) || isNaN(f)) {
  124. OpenLayers.Console.error('invalid value for Tween');
  125. }
  126. var c = f - b;
  127. value[i] = this.easing.apply(this, [this.time, b, c, this.duration]);
  128. }
  129. this.time++;
  130. if (this.callbacks && this.callbacks.eachStep) {
  131. this.callbacks.eachStep.call(this, value);
  132. }
  133. if (this.time > this.duration) {
  134. this.stop();
  135. }
  136. },
  137. /**
  138. * Create empty functions for all easing methods.
  139. */
  140. CLASS_NAME: "OpenLayers.Tween"
  141. });
  142. /**
  143. * Namespace: OpenLayers.Easing
  144. *
  145. * Credits:
  146. * Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>
  147. */
  148. OpenLayers.Easing = {
  149. /**
  150. * Create empty functions for all easing methods.
  151. */
  152. CLASS_NAME: "OpenLayers.Easing"
  153. };
  154. /**
  155. * Namespace: OpenLayers.Easing.Linear
  156. */
  157. OpenLayers.Easing.Linear = {
  158. /**
  159. * Function: easeIn
  160. *
  161. * Parameters:
  162. * t - {Float} time
  163. * b - {Float} beginning position
  164. * c - {Float} total change
  165. * d - {Float} duration of the transition
  166. */
  167. easeIn: function(t, b, c, d) {
  168. return c*t/d + b;
  169. },
  170. /**
  171. * Function: easeOut
  172. *
  173. * Parameters:
  174. * t - {Float} time
  175. * b - {Float} beginning position
  176. * c - {Float} total change
  177. * d - {Float} duration of the transition
  178. */
  179. easeOut: function(t, b, c, d) {
  180. return c*t/d + b;
  181. },
  182. /**
  183. * Function: easeInOut
  184. *
  185. * Parameters:
  186. * t - {Float} time
  187. * b - {Float} beginning position
  188. * c - {Float} total change
  189. * d - {Float} duration of the transition
  190. */
  191. easeInOut: function(t, b, c, d) {
  192. return c*t/d + b;
  193. },
  194. CLASS_NAME: "OpenLayers.Easing.Linear"
  195. };
  196. /**
  197. * Namespace: OpenLayers.Easing.Expo
  198. */
  199. OpenLayers.Easing.Expo = {
  200. /**
  201. * Function: easeIn
  202. *
  203. * Parameters:
  204. * t - {Float} time
  205. * b - {Float} beginning position
  206. * c - {Float} total change
  207. * d - {Float} duration of the transition
  208. */
  209. easeIn: function(t, b, c, d) {
  210. return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
  211. },
  212. /**
  213. * Function: easeOut
  214. *
  215. * Parameters:
  216. * t - {Float} time
  217. * b - {Float} beginning position
  218. * c - {Float} total change
  219. * d - {Float} duration of the transition
  220. */
  221. easeOut: function(t, b, c, d) {
  222. return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  223. },
  224. /**
  225. * Function: easeInOut
  226. *
  227. * Parameters:
  228. * t - {Float} time
  229. * b - {Float} beginning position
  230. * c - {Float} total change
  231. * d - {Float} duration of the transition
  232. */
  233. easeInOut: function(t, b, c, d) {
  234. if (t==0) return b;
  235. if (t==d) return b+c;
  236. if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  237. return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
  238. },
  239. CLASS_NAME: "OpenLayers.Easing.Expo"
  240. };
  241. /**
  242. * Namespace: OpenLayers.Easing.Quad
  243. */
  244. OpenLayers.Easing.Quad = {
  245. /**
  246. * Function: easeIn
  247. *
  248. * Parameters:
  249. * t - {Float} time
  250. * b - {Float} beginning position
  251. * c - {Float} total change
  252. * d - {Float} duration of the transition
  253. */
  254. easeIn: function(t, b, c, d) {
  255. return c*(t/=d)*t + b;
  256. },
  257. /**
  258. * Function: easeOut
  259. *
  260. * Parameters:
  261. * t - {Float} time
  262. * b - {Float} beginning position
  263. * c - {Float} total change
  264. * d - {Float} duration of the transition
  265. */
  266. easeOut: function(t, b, c, d) {
  267. return -c *(t/=d)*(t-2) + b;
  268. },
  269. /**
  270. * Function: easeInOut
  271. *
  272. * Parameters:
  273. * t - {Float} time
  274. * b - {Float} beginning position
  275. * c - {Float} total change
  276. * d - {Float} duration of the transition
  277. */
  278. easeInOut: function(t, b, c, d) {
  279. if ((t/=d/2) < 1) return c/2*t*t + b;
  280. return -c/2 * ((--t)*(t-2) - 1) + b;
  281. },
  282. CLASS_NAME: "OpenLayers.Easing.Quad"
  283. };