src/fx/Easing.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.fx.Easing
  17  *
  18 This class contains a series of function definitions used to modify values during an animation.
  19 They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
  20 speed over its duration. The following options are available:
  21
  22 - linear The default easing type
  23 - backIn
  24 - backOut
  25 - bounceIn
  26 - bounceOut
  27 - ease
  28 - easeIn
  29 - easeOut
  30 - easeInOut
  31 - elasticIn
  32 - elasticOut
  33 - cubic-bezier(x1, y1, x2, y2)
  34
  35 Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
  36 specification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
  37 be in the range [0, 1] or the definition is invalid.
  38
  39 [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
  40
  41  * @markdown
  42  * @singleton
  43  */
  44 Ext.ns('Ext.fx');
  45
  46 Ext.require('Ext.fx.CubicBezier', function() {
  47     var math = Math,
  48         pi = math.PI,
  49         pow = math.pow,
  50         sin = math.sin,
  51         sqrt = math.sqrt,
  52         abs = math.abs,
  53         backInSeed = 1.70158;
  54     Ext.fx.Easing = {
  55         // ease: Ext.fx.CubicBezier.cubicBezier(0.25, 0.1, 0.25, 1),
  56         // linear: Ext.fx.CubicBezier.cubicBezier(0, 0, 1, 1),
  57         // 'ease-in': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  58         // 'ease-out': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  59         // 'ease-in-out': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1),
  60         // 'easeIn': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
  61         // 'easeOut': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
  62         // 'easeInOut': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1)
  63     };
  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 < 0 ? -1 : 1),
  75                 y = -Q - q,
  76                 Y = pow(abs(y), 1/3) * (y < 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 < 0 ? -1 : 1),
  91                 y = -Q - q,
  92                 Y = pow(abs(y), 1/3) * (y < 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 < (1 / p)) {
 122                 l = s * n * n;
 123             } else {
 124                 if (n < (2 / p)) {
 125                     n -= (1.5 / p);
 126                     l = s * n * n + 0.75;
 127                 } else {
 128                     if (n < (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 });