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 specification `{@link http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag}`. The four values specify points P1 and P2 of the curve
  39 as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.
  40  * @markdown
  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 &lt; 0 ? -1 : 1),
  74                 y = -Q - q,
  75                 Y = pow(abs(y), 1/3) * (y &lt; 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 &lt; 0 ? -1 : 1),
  90                 y = -Q - q,
  91                 Y = pow(abs(y), 1/3) * (y &lt; 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 &lt; (1 / p)) {
 121                 l = s * n * n;
 122             } else {
 123                 if (n &lt; (2 / p)) {
 124                     n -= (1.5 / p);
 125                     l = s * n * n + 0.75;
 126                 } else {
 127                     if (n &lt; (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 });</pre>
 151 </body>
 152 </html>