easing.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojo.fx.easing"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojo.fx.easing"] = true;
  8. dojo.provide("dojo.fx.easing");
  9. dojo.getObject("fx.easing", true, dojo);
  10. dojo.fx.easing = {
  11. // summary:
  12. // Collection of easing functions to use beyond the default
  13. // `dojo._defaultEasing` function.
  14. //
  15. // description:
  16. //
  17. // Easing functions are used to manipulate the iteration through
  18. // an `dojo.Animation`s _Line. _Line being the properties of an Animation,
  19. // and the easing function progresses through that Line determing
  20. // how quickly (or slowly) it should go. Or more accurately: modify
  21. // the value of the _Line based on the percentage of animation completed.
  22. //
  23. // All functions follow a simple naming convention of "ease type" + "when".
  24. // If the name of the function ends in Out, the easing described appears
  25. // towards the end of the animation. "In" means during the beginning,
  26. // and InOut means both ranges of the Animation will applied, both
  27. // beginning and end.
  28. //
  29. // One does not call the easing function directly, it must be passed to
  30. // the `easing` property of an animation.
  31. //
  32. // example:
  33. // | dojo.require("dojo.fx.easing");
  34. // | var anim = dojo.fadeOut({
  35. // | node: 'node',
  36. // | duration: 2000,
  37. // | // note there is no ()
  38. // | easing: dojo.fx.easing.quadIn
  39. // | }).play();
  40. //
  41. linear: function(/* Decimal? */n){
  42. // summary: A linear easing function
  43. return n;
  44. },
  45. quadIn: function(/* Decimal? */n){
  46. return Math.pow(n, 2);
  47. },
  48. quadOut: function(/* Decimal? */n){
  49. return n * (n - 2) * -1;
  50. },
  51. quadInOut: function(/* Decimal? */n){
  52. n = n * 2;
  53. if(n < 1){ return Math.pow(n, 2) / 2; }
  54. return -1 * ((--n) * (n - 2) - 1) / 2;
  55. },
  56. cubicIn: function(/* Decimal? */n){
  57. return Math.pow(n, 3);
  58. },
  59. cubicOut: function(/* Decimal? */n){
  60. return Math.pow(n - 1, 3) + 1;
  61. },
  62. cubicInOut: function(/* Decimal? */n){
  63. n = n * 2;
  64. if(n < 1){ return Math.pow(n, 3) / 2; }
  65. n -= 2;
  66. return (Math.pow(n, 3) + 2) / 2;
  67. },
  68. quartIn: function(/* Decimal? */n){
  69. return Math.pow(n, 4);
  70. },
  71. quartOut: function(/* Decimal? */n){
  72. return -1 * (Math.pow(n - 1, 4) - 1);
  73. },
  74. quartInOut: function(/* Decimal? */n){
  75. n = n * 2;
  76. if(n < 1){ return Math.pow(n, 4) / 2; }
  77. n -= 2;
  78. return -1 / 2 * (Math.pow(n, 4) - 2);
  79. },
  80. quintIn: function(/* Decimal? */n){
  81. return Math.pow(n, 5);
  82. },
  83. quintOut: function(/* Decimal? */n){
  84. return Math.pow(n - 1, 5) + 1;
  85. },
  86. quintInOut: function(/* Decimal? */n){
  87. n = n * 2;
  88. if(n < 1){ return Math.pow(n, 5) / 2; };
  89. n -= 2;
  90. return (Math.pow(n, 5) + 2) / 2;
  91. },
  92. sineIn: function(/* Decimal? */n){
  93. return -1 * Math.cos(n * (Math.PI / 2)) + 1;
  94. },
  95. sineOut: function(/* Decimal? */n){
  96. return Math.sin(n * (Math.PI / 2));
  97. },
  98. sineInOut: function(/* Decimal? */n){
  99. return -1 * (Math.cos(Math.PI * n) - 1) / 2;
  100. },
  101. expoIn: function(/* Decimal? */n){
  102. return (n == 0) ? 0 : Math.pow(2, 10 * (n - 1));
  103. },
  104. expoOut: function(/* Decimal? */n){
  105. return (n == 1) ? 1 : (-1 * Math.pow(2, -10 * n) + 1);
  106. },
  107. expoInOut: function(/* Decimal? */n){
  108. if(n == 0){ return 0; }
  109. if(n == 1){ return 1; }
  110. n = n * 2;
  111. if(n < 1){ return Math.pow(2, 10 * (n - 1)) / 2; }
  112. --n;
  113. return (-1 * Math.pow(2, -10 * n) + 2) / 2;
  114. },
  115. circIn: function(/* Decimal? */n){
  116. return -1 * (Math.sqrt(1 - Math.pow(n, 2)) - 1);
  117. },
  118. circOut: function(/* Decimal? */n){
  119. n = n - 1;
  120. return Math.sqrt(1 - Math.pow(n, 2));
  121. },
  122. circInOut: function(/* Decimal? */n){
  123. n = n * 2;
  124. if(n < 1){ return -1 / 2 * (Math.sqrt(1 - Math.pow(n, 2)) - 1); }
  125. n -= 2;
  126. return 1 / 2 * (Math.sqrt(1 - Math.pow(n, 2)) + 1);
  127. },
  128. backIn: function(/* Decimal? */n){
  129. // summary:
  130. // An easing function that starts away from the target,
  131. // and quickly accelerates towards the end value.
  132. //
  133. // Use caution when the easing will cause values to become
  134. // negative as some properties cannot be set to negative values.
  135. var s = 1.70158;
  136. return Math.pow(n, 2) * ((s + 1) * n - s);
  137. },
  138. backOut: function(/* Decimal? */n){
  139. // summary:
  140. // An easing function that pops past the range briefly, and slowly comes back.
  141. //
  142. // description:
  143. // An easing function that pops past the range briefly, and slowly comes back.
  144. //
  145. // Use caution when the easing will cause values to become negative as some
  146. // properties cannot be set to negative values.
  147. n = n - 1;
  148. var s = 1.70158;
  149. return Math.pow(n, 2) * ((s + 1) * n + s) + 1;
  150. },
  151. backInOut: function(/* Decimal? */n){
  152. // summary:
  153. // An easing function combining the effects of `backIn` and `backOut`
  154. //
  155. // description:
  156. // An easing function combining the effects of `backIn` and `backOut`.
  157. // Use caution when the easing will cause values to become negative
  158. // as some properties cannot be set to negative values.
  159. var s = 1.70158 * 1.525;
  160. n = n * 2;
  161. if(n < 1){ return (Math.pow(n, 2) * ((s + 1) * n - s)) / 2; }
  162. n-=2;
  163. return (Math.pow(n, 2) * ((s + 1) * n + s) + 2) / 2;
  164. },
  165. elasticIn: function(/* Decimal? */n){
  166. // summary:
  167. // An easing function the elastically snaps from the start value
  168. //
  169. // description:
  170. // An easing function the elastically snaps from the start value
  171. //
  172. // Use caution when the elasticity will cause values to become negative
  173. // as some properties cannot be set to negative values.
  174. if(n == 0 || n == 1){ return n; }
  175. var p = .3;
  176. var s = p / 4;
  177. n = n - 1;
  178. return -1 * Math.pow(2, 10 * n) * Math.sin((n - s) * (2 * Math.PI) / p);
  179. },
  180. elasticOut: function(/* Decimal? */n){
  181. // summary:
  182. // An easing function that elasticly snaps around the target value,
  183. // near the end of the Animation
  184. //
  185. // description:
  186. // An easing function that elasticly snaps around the target value,
  187. // near the end of the Animation
  188. //
  189. // Use caution when the elasticity will cause values to become
  190. // negative as some properties cannot be set to negative values.
  191. if(n==0 || n == 1){ return n; }
  192. var p = .3;
  193. var s = p / 4;
  194. return Math.pow(2, -10 * n) * Math.sin((n - s) * (2 * Math.PI) / p) + 1;
  195. },
  196. elasticInOut: function(/* Decimal? */n){
  197. // summary:
  198. // An easing function that elasticly snaps around the value, near
  199. // the beginning and end of the Animation.
  200. //
  201. // description:
  202. // An easing function that elasticly snaps around the value, near
  203. // the beginning and end of the Animation.
  204. //
  205. // Use caution when the elasticity will cause values to become
  206. // negative as some properties cannot be set to negative values.
  207. if(n == 0) return 0;
  208. n = n * 2;
  209. if(n == 2) return 1;
  210. var p = .3 * 1.5;
  211. var s = p / 4;
  212. if(n < 1){
  213. n -= 1;
  214. return -.5 * (Math.pow(2, 10 * n) * Math.sin((n - s) * (2 * Math.PI) / p));
  215. }
  216. n -= 1;
  217. return .5 * (Math.pow(2, -10 * n) * Math.sin((n - s) * (2 * Math.PI) / p)) + 1;
  218. },
  219. bounceIn: function(/* Decimal? */n){
  220. // summary:
  221. // An easing function that 'bounces' near the beginning of an Animation
  222. return (1 - dojo.fx.easing.bounceOut(1 - n)); // Decimal
  223. },
  224. bounceOut: function(/* Decimal? */n){
  225. // summary:
  226. // An easing function that 'bounces' near the end of an Animation
  227. var s = 7.5625;
  228. var p = 2.75;
  229. var l;
  230. if(n < (1 / p)){
  231. l = s * Math.pow(n, 2);
  232. }else if(n < (2 / p)){
  233. n -= (1.5 / p);
  234. l = s * Math.pow(n, 2) + .75;
  235. }else if(n < (2.5 / p)){
  236. n -= (2.25 / p);
  237. l = s * Math.pow(n, 2) + .9375;
  238. }else{
  239. n -= (2.625 / p);
  240. l = s * Math.pow(n, 2) + .984375;
  241. }
  242. return l;
  243. },
  244. bounceInOut: function(/* Decimal? */n){
  245. // summary:
  246. // An easing function that 'bounces' at the beginning and end of the Animation
  247. if(n < 0.5){ return dojo.fx.easing.bounceIn(n * 2) / 2; }
  248. return (dojo.fx.easing.bounceOut(n * 2 - 1) / 2) + 0.5; // Decimal
  249. }
  250. };
  251. }