easing.js 7.7 KB

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