/ext-4.1.0_b3/docs/source/Easing.html
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 < 0 ? -1 : 1),
77 y = -Q - q,
78 Y = pow(abs(y), 1/3) * (y < 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 < 0 ? -1 : 1),
93 y = -Q - q,
94 Y = pow(abs(y), 1/3) * (y < 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 < (1 / p)) {
124 l = s * n * n;
125 } else {
126 if (n < (2 / p)) {
127 n -= (1.5 / p);
128 l = s * n * n + 0.75;
129 } else {
130 if (n < (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>