PageRenderTime 28ms CodeModel.GetById 20ms app.highlight 6ms RepoModel.GetById 0ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/Easing.html

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