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