docs/source/Easing.html

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