/ext-4.1.0_b3/docs/source/Easing.html

https://bitbucket.org/srogerf/javascript · HTML · 155 lines · 153 code · 2 blank · 0 comment · 0 complexity · 82ae917f12cee0f3228730ee98dac7fa MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-fx-Easing'>/**
  19. </span> * @class Ext.fx.Easing
  20. *
  21. * This class contains a series of function definitions used to modify values during an animation.
  22. * They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
  23. * speed over its duration. The following options are available:
  24. *
  25. * - linear The default easing type
  26. * - backIn
  27. * - backOut
  28. * - bounceIn
  29. * - bounceOut
  30. * - ease
  31. * - easeIn
  32. * - easeOut
  33. * - easeInOut
  34. * - elasticIn
  35. * - elasticOut
  36. * - cubic-bezier(x1, y1, x2, y2)
  37. *
  38. * Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
  39. * specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
  40. * be in the range [0, 1] or the definition is invalid.
  41. *
  42. * [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
  43. *
  44. * @singleton
  45. */
  46. Ext.ns('Ext.fx');
  47. Ext.require('Ext.fx.CubicBezier', function() {
  48. var math = Math,
  49. pi = math.PI,
  50. pow = math.pow,
  51. sin = math.sin,
  52. sqrt = math.sqrt,
  53. abs = math.abs,
  54. backInSeed = 1.70158;
  55. Ext.fx.Easing = {
  56. // ease: Ext.fx.CubicBezier.cubicBezier(0.25, 0.1, 0.25, 1),
  57. // linear: Ext.fx.CubicBezier.cubicBezier(0, 0, 1, 1),
  58. // 'ease-in': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  59. // 'ease-out': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  60. // 'ease-in-out': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1),
  61. // 'easeIn': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  62. // 'easeOut': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  63. // 'easeInOut': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1)
  64. };
  65. Ext.apply(Ext.fx.Easing, {
  66. linear: function(n) {
  67. return n;
  68. },
  69. ease: function(n) {
  70. var q = 0.07813 - n / 2,
  71. alpha = -0.25,
  72. Q = sqrt(0.0066 + q * q),
  73. x = Q - q,
  74. X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
  75. y = -Q - q,
  76. Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
  77. t = X + Y + 0.25;
  78. return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
  79. },
  80. easeIn: function (n) {
  81. return pow(n, 1.7);
  82. },
  83. easeOut: function (n) {
  84. return pow(n, 0.48);
  85. },
  86. easeInOut: function(n) {
  87. var q = 0.48 - n / 1.04,
  88. Q = sqrt(0.1734 + q * q),
  89. x = Q - q,
  90. X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
  91. y = -Q - q,
  92. Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
  93. t = X + Y + 0.5;
  94. return (1 - t) * 3 * t * t + t * t * t;
  95. },
  96. backIn: function (n) {
  97. return n * n * ((backInSeed + 1) * n - backInSeed);
  98. },
  99. backOut: function (n) {
  100. n = n - 1;
  101. return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
  102. },
  103. elasticIn: function (n) {
  104. if (n === 0 || n === 1) {
  105. return n;
  106. }
  107. var p = 0.3,
  108. s = p / 4;
  109. return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
  110. },
  111. elasticOut: function (n) {
  112. return 1 - Ext.fx.Easing.elasticIn(1 - n);
  113. },
  114. bounceIn: function (n) {
  115. return 1 - Ext.fx.Easing.bounceOut(1 - n);
  116. },
  117. bounceOut: function (n) {
  118. var s = 7.5625,
  119. p = 2.75,
  120. l;
  121. if (n &lt; (1 / p)) {
  122. l = s * n * n;
  123. } else {
  124. if (n &lt; (2 / p)) {
  125. n -= (1.5 / p);
  126. l = s * n * n + 0.75;
  127. } else {
  128. if (n &lt; (2.5 / p)) {
  129. n -= (2.25 / p);
  130. l = s * n * n + 0.9375;
  131. } else {
  132. n -= (2.625 / p);
  133. l = s * n * n + 0.984375;
  134. }
  135. }
  136. }
  137. return l;
  138. }
  139. });
  140. Ext.apply(Ext.fx.Easing, {
  141. 'back-in': Ext.fx.Easing.backIn,
  142. 'back-out': Ext.fx.Easing.backOut,
  143. 'ease-in': Ext.fx.Easing.easeIn,
  144. 'ease-out': Ext.fx.Easing.easeOut,
  145. 'elastic-in': Ext.fx.Easing.elasticIn,
  146. 'elastic-out': Ext.fx.Easing.elasticIn,
  147. 'bounce-in': Ext.fx.Easing.bounceIn,
  148. 'bounce-out': Ext.fx.Easing.bounceOut,
  149. 'ease-in-out': Ext.fx.Easing.easeInOut
  150. });
  151. });</pre>
  152. </body>
  153. </html>