/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. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-fx-Easing'>/**
    19. 

  19. </span> * @class Ext.fx.Easing
    20. 

  20.  *
    21. 

  21.  * This class contains a series of function definitions used to modify values during an animation.
    22. 

  22.  * They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
    23. 

  23.  * speed over its duration. The following options are available: 
    24. 

  24.  *
    25. 

  25.  * - linear The default easing type
    26. 

  26.  * - backIn
    27. 

  27.  * - backOut
    28. 

  28.  * - bounceIn
    29. 

  29.  * - bounceOut
    30. 

  30.  * - ease
    31. 

  31.  * - easeIn
    32. 

  32.  * - easeOut
    33. 

  33.  * - easeInOut
    34. 

  34.  * - elasticIn
    35. 

  35.  * - elasticOut
    36. 

  36.  * - cubic-bezier(x1, y1, x2, y2)
    37. 

  37.  *
    38. 

  38.  * Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
    39. 

  39.  * specification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
    40. 

  40.  * be in the range [0, 1] or the definition is invalid.
    41. 

  41.  *
    42. 

  42.  * [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
    43. 

  43.  *
    44. 

  44.  * @singleton
    45. 

  45.  */
    46. 

  46. Ext.ns('Ext.fx');
    47. 

  47. 

  48. Ext.require('Ext.fx.CubicBezier', function() {
    49. 

  49.     var math = Math,
    50. 

  50.         pi = math.PI,
    51. 

  51.         pow = math.pow,
    52. 

  52.         sin = math.sin,
    53. 

  53.         sqrt = math.sqrt,
    54. 

  54.         abs = math.abs,
    55. 

  55.         backInSeed = 1.70158;
    56. 

  56.     Ext.fx.Easing = {
    57. 

  57.         // ease: Ext.fx.CubicBezier.cubicBezier(0.25, 0.1, 0.25, 1),
    58. 

  58.         // linear: Ext.fx.CubicBezier.cubicBezier(0, 0, 1, 1),
    59. 

  59.         // 'ease-in': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
    60. 

  60.         // 'ease-out': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
    61. 

  61.         // 'ease-in-out': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1),
    62. 

  62.         // 'easeIn': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
    63. 

  63.         // 'easeOut': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
    64. 

  64.         // 'easeInOut': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1)
    65. 

  65.     };
    66. 

  66. 

  67.     Ext.apply(Ext.fx.Easing, {
    68. 

  68.         linear: function(n) {
    69. 

  69.             return n;
    70. 

  70.         },
    71. 

  71.         ease: function(n) {
    72. 

  72.             var q = 0.07813 - n / 2,
    73. 

  73.                 alpha = -0.25,
    74. 

  74.                 Q = sqrt(0.0066 + q * q),
    75. 

  75.                 x = Q - q,
    76. 

  76.                 X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
    77. 

  77.                 y = -Q - q,
    78. 

  78.                 Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
    79. 

  79.                 t = X + Y + 0.25;
    80. 

  80.             return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
    81. 

  81.         },
    82. 

  82.         easeIn: function (n) {
    83. 

  83.             return pow(n, 1.7);
    84. 

  84.         },
    85. 

  85.         easeOut: function (n) {
    86. 

  86.             return pow(n, 0.48);
    87. 

  87.         },
    88. 

  88.         easeInOut: function(n) {
    89. 

  89.             var q = 0.48 - n / 1.04,
    90. 

  90.                 Q = sqrt(0.1734 + q * q),
    91. 

  91.                 x = Q - q,
    92. 

  92.                 X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
    93. 

  93.                 y = -Q - q,
    94. 

  94.                 Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
    95. 

  95.                 t = X + Y + 0.5;
    96. 

  96.             return (1 - t) * 3 * t * t + t * t * t;
    97. 

  97.         },
    98. 

  98.         backIn: function (n) {
    99. 

  99.             return n * n * ((backInSeed + 1) * n - backInSeed);
    100. 

  100.         },
    101. 

  101.         backOut: function (n) {
    102. 

  102.             n = n - 1;
    103. 

  103.             return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
    104. 

  104.         },
    105. 

  105.         elasticIn: function (n) {
    106. 

  106.             if (n === 0 || n === 1) {
    107. 

  107.                 return n;
    108. 

  108.             }
    109. 

  109.             var p = 0.3,
    110. 

  110.                 s = p / 4;
    111. 

  111.             return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
    112. 

  112.         },
    113. 

  113.         elasticOut: function (n) {
    114. 

  114.             return 1 - Ext.fx.Easing.elasticIn(1 - n);
    115. 

  115.         },
    116. 

  116.         bounceIn: function (n) {
    117. 

  117.             return 1 - Ext.fx.Easing.bounceOut(1 - n);
    118. 

  118.         },
    119. 

  119.         bounceOut: function (n) {
    120. 

  120.             var s = 7.5625,
    121. 

  121.                 p = 2.75,
    122. 

  122.                 l;
    123. 

  123.             if (n &lt; (1 / p)) {
    124. 

  124.                 l = s * n * n;
    125. 

  125.             } else {
    126. 

  126.                 if (n &lt; (2 / p)) {
    127. 

  127.                     n -= (1.5 / p);
    128. 

  128.                     l = s * n * n + 0.75;
    129. 

  129.                 } else {
    130. 

  130.                     if (n &lt; (2.5 / p)) {
    131. 

  131.                         n -= (2.25 / p);
    132. 

  132.                         l = s * n * n + 0.9375;
    133. 

  133.                     } else {
    134. 

  134.                         n -= (2.625 / p);
    135. 

  135.                         l = s * n * n + 0.984375;
    136. 

  136.                     }
    137. 

  137.                 }
    138. 

  138.             }
    139. 

  139.             return l;
    140. 

  140.         }
    141. 

  141.     });
    142. 

  142.     Ext.apply(Ext.fx.Easing, {
    143. 

  143.         'back-in': Ext.fx.Easing.backIn,
    144. 

  144.         'back-out': Ext.fx.Easing.backOut,
    145. 

  145.         'ease-in': Ext.fx.Easing.easeIn,
    146. 

  146.         'ease-out': Ext.fx.Easing.easeOut,
    147. 

  147.         'elastic-in': Ext.fx.Easing.elasticIn,
    148. 

  148.         'elastic-out': Ext.fx.Easing.elasticIn,
    149. 

  149.         'bounce-in': Ext.fx.Easing.bounceIn,
    150. 

  150.         'bounce-out': Ext.fx.Easing.bounceOut,
    151. 

  151.         'ease-in-out': Ext.fx.Easing.easeInOut
    152. 

  152.     });
    153. 

  153. });</pre>
    154. 

  154. </body>
    155. 

  155. </html>
    156.