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