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