docs/source/Easing.html

   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
  48 Ext.require('Ext.fx.CubicBezier', function() {
  49     var math = Math,
  50         pi = math.PI,
  51         pow = math.pow,
  52         sin = math.sin,
  53         sqrt = math.sqrt,
  54         abs = math.abs,
  55         backInSeed = 1.70158;
  56     Ext.fx.Easing = {
  57         // ease: Ext.fx.CubicBezier.cubicBezier(0.25, 0.1, 0.25, 1),
  58         // linear: Ext.fx.CubicBezier.cubicBezier(0, 0, 1, 1),
  59         // 'ease-in': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  60         // 'ease-out': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  61         // 'ease-in-out': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1),
  62         // 'easeIn': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  63         // 'easeOut': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  64         // 'easeInOut': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1)
  65     };
  66
  67     Ext.apply(Ext.fx.Easing, {
  68         linear: function(n) {
  69             return n;
  70         },
  71         ease: function(n) {
  72             var q = 0.07813 - n / 2,
  73                 alpha = -0.25,
  74                 Q = sqrt(0.0066 + q * q),
  75                 x = Q - q,
  76                 X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
  77                 y = -Q - q,
  78                 Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
  79                 t = X + Y + 0.25;
  80             return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
  81         },
  82         easeIn: function (n) {
  83             return pow(n, 1.7);
  84         },
  85         easeOut: function (n) {
  86             return pow(n, 0.48);
  87         },
  88         easeInOut: function(n) {
  89             var q = 0.48 - n / 1.04,
  90                 Q = sqrt(0.1734 + q * q),
  91                 x = Q - q,
  92                 X = pow(abs(x), 1/3) * (x &lt; 0 ? -1 : 1),
  93                 y = -Q - q,
  94                 Y = pow(abs(y), 1/3) * (y &lt; 0 ? -1 : 1),
  95                 t = X + Y + 0.5;
  96             return (1 - t) * 3 * t * t + t * t * t;
  97         },
  98         backIn: function (n) {
  99             return n * n * ((backInSeed + 1) * n - backInSeed);
 100         },
 101         backOut: function (n) {
 102             n = n - 1;
 103             return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
 104         },
 105         elasticIn: function (n) {
 106             if (n === 0 || n === 1) {
 107                 return n;
 108             }
 109             var p = 0.3,
 110                 s = p / 4;
 111             return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
 112         },
 113         elasticOut: function (n) {
 114             return 1 - Ext.fx.Easing.elasticIn(1 - n);
 115         },
 116         bounceIn: function (n) {
 117             return 1 - Ext.fx.Easing.bounceOut(1 - n);
 118         },
 119         bounceOut: function (n) {
 120             var s = 7.5625,
 121                 p = 2.75,
 122                 l;
 123             if (n &lt; (1 / p)) {
 124                 l = s * n * n;
 125             } else {
 126                 if (n &lt; (2 / p)) {
 127                     n -= (1.5 / p);
 128                     l = s * n * n + 0.75;
 129                 } else {
 130                     if (n &lt; (2.5 / p)) {
 131                         n -= (2.25 / p);
 132                         l = s * n * n + 0.9375;
 133                     } else {
 134                         n -= (2.625 / p);
 135                         l = s * n * n + 0.984375;
 136                     }
 137                 }
 138             }
 139             return l;
 140         }
 141     });
 142     Ext.apply(Ext.fx.Easing, {
 143         'back-in': Ext.fx.Easing.backIn,
 144         'back-out': Ext.fx.Easing.backOut,
 145         'ease-in': Ext.fx.Easing.easeIn,
 146         'ease-out': Ext.fx.Easing.easeOut,
 147         'elastic-in': Ext.fx.Easing.elasticIn,
 148         'elastic-out': Ext.fx.Easing.elasticIn,
 149         'bounce-in': Ext.fx.Easing.bounceIn,
 150         'bounce-out': Ext.fx.Easing.bounceOut,
 151         'ease-in-out': Ext.fx.Easing.easeInOut
 152     });
 153 });</pre>
 154 </body>
 155 </html>