source: Dev/branches/rest-dojo-ui/client/dojo/fx/easing.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).

File size: 7.6 KB
Line 
1define(["../_base/lang"], function(lang) {
2// module:
3//              dojo/fx/easing
4// summary:
5//              This module defines standard easing functions that are useful for animations.
6
7var easingFuncs = /*===== dojo.fx.easing= =====*/ {
8        // summary:
9        //              Collection of easing functions to use beyond the default
10        //              `dojo._defaultEasing` function.
11        //
12        // description:
13        //
14        //              Easing functions are used to manipulate the iteration through
15        //              an `dojo.Animation`s _Line. _Line being the properties of an Animation,
16        //              and the easing function progresses through that Line determing
17        //              how quickly (or slowly) it should go. Or more accurately: modify
18        //              the value of the _Line based on the percentage of animation completed.
19        //
20        //              All functions follow a simple naming convention of "ease type" + "when".
21        //              If the name of the function ends in Out, the easing described appears
22        //              towards the end of the animation. "In" means during the beginning,
23        //              and InOut means both ranges of the Animation will applied, both
24        //              beginning and end.
25        //
26        //              One does not call the easing function directly, it must be passed to
27        //              the `easing` property of an animation.
28        //
29        //      example:
30        //      |       dojo.require("dojo.fx.easing");
31        //      |       var anim = dojo.fadeOut({
32        //      |               node: 'node',
33        //      |               duration: 2000,
34        //      |               //      note there is no ()
35        //      |               easing: dojo.fx.easing.quadIn
36        //      |       }).play();
37        //
38
39        linear: function(/* Decimal? */n){
40                // summary: A linear easing function
41                return n;
42        },
43
44        quadIn: function(/* Decimal? */n){
45                return Math.pow(n, 2);
46        },
47
48        quadOut: function(/* Decimal? */n){
49                return n * (n - 2) * -1;
50        },
51
52        quadInOut: function(/* Decimal? */n){
53                n = n * 2;
54                if(n < 1){ return Math.pow(n, 2) / 2; }
55                return -1 * ((--n) * (n - 2) - 1) / 2;
56        },
57
58        cubicIn: function(/* Decimal? */n){
59                return Math.pow(n, 3);
60        },
61
62        cubicOut: function(/* Decimal? */n){
63                return Math.pow(n - 1, 3) + 1;
64        },
65
66        cubicInOut: function(/* Decimal? */n){
67                n = n * 2;
68                if(n < 1){ return Math.pow(n, 3) / 2; }
69                n -= 2;
70                return (Math.pow(n, 3) + 2) / 2;
71        },
72
73        quartIn: function(/* Decimal? */n){
74                return Math.pow(n, 4);
75        },
76
77        quartOut: function(/* Decimal? */n){
78                return -1 * (Math.pow(n - 1, 4) - 1);
79        },
80
81        quartInOut: function(/* Decimal? */n){
82                n = n * 2;
83                if(n < 1){ return Math.pow(n, 4) / 2; }
84                n -= 2;
85                return -1 / 2 * (Math.pow(n, 4) - 2);
86        },
87
88        quintIn: function(/* Decimal? */n){
89                return Math.pow(n, 5);
90        },
91
92        quintOut: function(/* Decimal? */n){
93                return Math.pow(n - 1, 5) + 1;
94        },
95
96        quintInOut: function(/* Decimal? */n){
97                n = n * 2;
98                if(n < 1){ return Math.pow(n, 5) / 2; }
99                n -= 2;
100                return (Math.pow(n, 5) + 2) / 2;
101        },
102
103        sineIn: function(/* Decimal? */n){
104                return -1 * Math.cos(n * (Math.PI / 2)) + 1;
105        },
106
107        sineOut: function(/* Decimal? */n){
108                return Math.sin(n * (Math.PI / 2));
109        },
110
111        sineInOut: function(/* Decimal? */n){
112                return -1 * (Math.cos(Math.PI * n) - 1) / 2;
113        },
114
115        expoIn: function(/* Decimal? */n){
116                return (n == 0) ? 0 : Math.pow(2, 10 * (n - 1));
117        },
118
119        expoOut: function(/* Decimal? */n){
120                return (n == 1) ? 1 : (-1 * Math.pow(2, -10 * n) + 1);
121        },
122
123        expoInOut: function(/* Decimal? */n){
124                if(n == 0){ return 0; }
125                if(n == 1){ return 1; }
126                n = n * 2;
127                if(n < 1){ return Math.pow(2, 10 * (n - 1)) / 2; }
128                --n;
129                return (-1 * Math.pow(2, -10 * n) + 2) / 2;
130        },
131
132        circIn: function(/* Decimal? */n){
133                return -1 * (Math.sqrt(1 - Math.pow(n, 2)) - 1);
134        },
135
136        circOut: function(/* Decimal? */n){
137                n = n - 1;
138                return Math.sqrt(1 - Math.pow(n, 2));
139        },
140
141        circInOut: function(/* Decimal? */n){
142                n = n * 2;
143                if(n < 1){ return -1 / 2 * (Math.sqrt(1 - Math.pow(n, 2)) - 1); }
144                n -= 2;
145                return 1 / 2 * (Math.sqrt(1 - Math.pow(n, 2)) + 1);
146        },
147
148        backIn: function(/* Decimal? */n){
149                // summary:
150                //              An easing function that starts away from the target,
151                //              and quickly accelerates towards the end value.
152                //
153                //              Use caution when the easing will cause values to become
154                //              negative as some properties cannot be set to negative values.
155                var s = 1.70158;
156                return Math.pow(n, 2) * ((s + 1) * n - s);
157        },
158
159        backOut: function(/* Decimal? */n){
160                // summary:
161                //              An easing function that pops past the range briefly, and slowly comes back.
162                //
163                // description:
164                //              An easing function that pops past the range briefly, and slowly comes back.
165                //
166                //              Use caution when the easing will cause values to become negative as some
167                //              properties cannot be set to negative values.
168
169                n = n - 1;
170                var s = 1.70158;
171                return Math.pow(n, 2) * ((s + 1) * n + s) + 1;
172        },
173
174        backInOut: function(/* Decimal? */n){
175                // summary:
176                //              An easing function combining the effects of `backIn` and `backOut`
177                //
178                // description:
179                //              An easing function combining the effects of `backIn` and `backOut`.
180                //              Use caution when the easing will cause values to become negative
181                //              as some properties cannot be set to negative values.
182                var s = 1.70158 * 1.525;
183                n = n * 2;
184                if(n < 1){ return (Math.pow(n, 2) * ((s + 1) * n - s)) / 2; }
185                n-=2;
186                return (Math.pow(n, 2) * ((s + 1) * n + s) + 2) / 2;
187        },
188
189        elasticIn: function(/* Decimal? */n){
190                // summary:
191                //              An easing function the elastically snaps from the start value
192                //
193                // description:
194                //              An easing function the elastically snaps from the start value
195                //
196                //              Use caution when the elasticity will cause values to become negative
197                //              as some properties cannot be set to negative values.
198                if(n == 0 || n == 1){ return n; }
199                var p = .3;
200                var s = p / 4;
201                n = n - 1;
202                return -1 * Math.pow(2, 10 * n) * Math.sin((n - s) * (2 * Math.PI) / p);
203        },
204
205        elasticOut: function(/* Decimal? */n){
206                // summary:
207                //              An easing function that elasticly snaps around the target value,
208                //              near the end of the Animation
209                //
210                // description:
211                //              An easing function that elasticly snaps around the target value,
212                //              near the end of the Animation
213                //
214                //              Use caution when the elasticity will cause values to become
215                //              negative as some properties cannot be set to negative values.
216                if(n==0 || n == 1){ return n; }
217                var p = .3;
218                var s = p / 4;
219                return Math.pow(2, -10 * n) * Math.sin((n - s) * (2 * Math.PI) / p) + 1;
220        },
221
222        elasticInOut: function(/* Decimal? */n){
223                // summary:
224                //              An easing function that elasticly snaps around the value, near
225                //              the beginning and end of the Animation.
226                //
227                // description:
228                //              An easing function that elasticly snaps around the value, near
229                //              the beginning and end of the Animation.
230                //
231                //              Use caution when the elasticity will cause values to become
232                //              negative as some properties cannot be set to negative values.
233                if(n == 0) return 0;
234                n = n * 2;
235                if(n == 2) return 1;
236                var p = .3 * 1.5;
237                var s = p / 4;
238                if(n < 1){
239                        n -= 1;
240                        return -.5 * (Math.pow(2, 10 * n) * Math.sin((n - s) * (2 * Math.PI) / p));
241                }
242                n -= 1;
243                return .5 * (Math.pow(2, -10 * n) * Math.sin((n - s) * (2 * Math.PI) / p)) + 1;
244        },
245
246        bounceIn: function(/* Decimal? */n){
247                // summary:
248                //              An easing function that 'bounces' near the beginning of an Animation
249                return (1 - easingFuncs.bounceOut(1 - n)); // Decimal
250        },
251
252        bounceOut: function(/* Decimal? */n){
253                // summary:
254                //              An easing function that 'bounces' near the end of an Animation
255                var s = 7.5625;
256                var p = 2.75;
257                var l;
258                if(n < (1 / p)){
259                        l = s * Math.pow(n, 2);
260                }else if(n < (2 / p)){
261                        n -= (1.5 / p);
262                        l = s * Math.pow(n, 2) + .75;
263                }else if(n < (2.5 / p)){
264                        n -= (2.25 / p);
265                        l = s * Math.pow(n, 2) + .9375;
266                }else{
267                        n -= (2.625 / p);
268                        l = s * Math.pow(n, 2) + .984375;
269                }
270                return l;
271        },
272
273        bounceInOut: function(/* Decimal? */n){
274                // summary:
275                //              An easing function that 'bounces' at the beginning and end of the Animation
276                if(n < 0.5){ return easingFuncs.bounceIn(n * 2) / 2; }
277                return (easingFuncs.bounceOut(n * 2 - 1) / 2) + 0.5; // Decimal
278        }
279};
280
281lang.setObject("dojo.fx.easing", easingFuncs);
282
283return easingFuncs;
284});
Note: See TracBrowser for help on using the repository browser.