1
|
/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
|
2
|
* full list of contributors). Published under the 2-clause BSD license.
|
3
|
* See license.txt in the OpenLayers distribution or repository for the
|
4
|
* full text of the license. */
|
5
|
|
6
|
/**
|
7
|
* @requires OpenLayers/BaseTypes/Class.js
|
8
|
* @requires OpenLayers/Animation.js
|
9
|
*/
|
10
|
|
11
|
/**
|
12
|
* Namespace: OpenLayers.Tween
|
13
|
*/
|
14
|
OpenLayers.Tween = OpenLayers.Class({
|
15
|
|
16
|
/**
|
17
|
* APIProperty: easing
|
18
|
* {<OpenLayers.Easing>(Function)} Easing equation used for the animation
|
19
|
* Defaultly set to OpenLayers.Easing.Expo.easeOut
|
20
|
*/
|
21
|
easing: null,
|
22
|
|
23
|
/**
|
24
|
* APIProperty: begin
|
25
|
* {Object} Values to start the animation with
|
26
|
*/
|
27
|
begin: null,
|
28
|
|
29
|
/**
|
30
|
* APIProperty: finish
|
31
|
* {Object} Values to finish the animation with
|
32
|
*/
|
33
|
finish: null,
|
34
|
|
35
|
/**
|
36
|
* APIProperty: duration
|
37
|
* {int} duration of the tween (number of steps)
|
38
|
*/
|
39
|
duration: null,
|
40
|
|
41
|
/**
|
42
|
* APIProperty: callbacks
|
43
|
* {Object} An object with start, eachStep and done properties whose values
|
44
|
* are functions to be call during the animation. They are passed the
|
45
|
* current computed value as argument.
|
46
|
*/
|
47
|
callbacks: null,
|
48
|
|
49
|
/**
|
50
|
* Property: time
|
51
|
* {int} Step counter
|
52
|
*/
|
53
|
time: null,
|
54
|
|
55
|
/**
|
56
|
* APIProperty: minFrameRate
|
57
|
* {Number} The minimum framerate for animations in frames per second. After
|
58
|
* each step, the time spent in the animation is compared to the calculated
|
59
|
* time at this frame rate. If the animation runs longer than the calculated
|
60
|
* time, the next step is skipped. Default is 30.
|
61
|
*/
|
62
|
minFrameRate: null,
|
63
|
|
64
|
/**
|
65
|
* Property: startTime
|
66
|
* {Number} The timestamp of the first execution step. Used for skipping
|
67
|
* frames
|
68
|
*/
|
69
|
startTime: null,
|
70
|
|
71
|
/**
|
72
|
* Property: animationId
|
73
|
* {int} Loop id returned by OpenLayers.Animation.start
|
74
|
*/
|
75
|
animationId: null,
|
76
|
|
77
|
/**
|
78
|
* Property: playing
|
79
|
* {Boolean} Tells if the easing is currently playing
|
80
|
*/
|
81
|
playing: false,
|
82
|
|
83
|
/**
|
84
|
* Constructor: OpenLayers.Tween
|
85
|
* Creates a Tween.
|
86
|
*
|
87
|
* Parameters:
|
88
|
* easing - {<OpenLayers.Easing>(Function)} easing function method to use
|
89
|
*/
|
90
|
initialize: function(easing) {
|
91
|
this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut;
|
92
|
},
|
93
|
|
94
|
/**
|
95
|
* APIMethod: start
|
96
|
* Plays the Tween, and calls the callback method on each step
|
97
|
*
|
98
|
* Parameters:
|
99
|
* begin - {Object} values to start the animation with
|
100
|
* finish - {Object} values to finish the animation with
|
101
|
* duration - {int} duration of the tween (number of steps)
|
102
|
* options - {Object} hash of options (callbacks (start, eachStep, done),
|
103
|
* minFrameRate)
|
104
|
*/
|
105
|
start: function(begin, finish, duration, options) {
|
106
|
this.playing = true;
|
107
|
this.begin = begin;
|
108
|
this.finish = finish;
|
109
|
this.duration = duration;
|
110
|
this.callbacks = options.callbacks;
|
111
|
this.minFrameRate = options.minFrameRate || 30;
|
112
|
this.time = 0;
|
113
|
this.startTime = new Date().getTime();
|
114
|
OpenLayers.Animation.stop(this.animationId);
|
115
|
this.animationId = null;
|
116
|
if (this.callbacks && this.callbacks.start) {
|
117
|
this.callbacks.start.call(this, this.begin);
|
118
|
}
|
119
|
this.animationId = OpenLayers.Animation.start(
|
120
|
OpenLayers.Function.bind(this.play, this)
|
121
|
);
|
122
|
},
|
123
|
|
124
|
/**
|
125
|
* APIMethod: stop
|
126
|
* Stops the Tween, and calls the done callback
|
127
|
* Doesn't do anything if animation is already finished
|
128
|
*/
|
129
|
stop: function() {
|
130
|
if (!this.playing) {
|
131
|
return;
|
132
|
}
|
133
|
|
134
|
if (this.callbacks && this.callbacks.done) {
|
135
|
this.callbacks.done.call(this, this.finish);
|
136
|
}
|
137
|
OpenLayers.Animation.stop(this.animationId);
|
138
|
this.animationId = null;
|
139
|
this.playing = false;
|
140
|
},
|
141
|
|
142
|
/**
|
143
|
* Method: play
|
144
|
* Calls the appropriate easing method
|
145
|
*/
|
146
|
play: function() {
|
147
|
var value = {};
|
148
|
for (var i in this.begin) {
|
149
|
var b = this.begin[i];
|
150
|
var f = this.finish[i];
|
151
|
if (b == null || f == null || isNaN(b) || isNaN(f)) {
|
152
|
throw new TypeError('invalid value for Tween');
|
153
|
}
|
154
|
|
155
|
var c = f - b;
|
156
|
value[i] = this.easing.apply(this, [this.time, b, c, this.duration]);
|
157
|
}
|
158
|
this.time++;
|
159
|
|
160
|
if (this.callbacks && this.callbacks.eachStep) {
|
161
|
// skip frames if frame rate drops below threshold
|
162
|
if ((new Date().getTime() - this.startTime) / this.time <= 1000 / this.minFrameRate) {
|
163
|
this.callbacks.eachStep.call(this, value);
|
164
|
}
|
165
|
}
|
166
|
|
167
|
if (this.time > this.duration) {
|
168
|
this.stop();
|
169
|
}
|
170
|
},
|
171
|
|
172
|
/**
|
173
|
* Create empty functions for all easing methods.
|
174
|
*/
|
175
|
CLASS_NAME: "OpenLayers.Tween"
|
176
|
});
|
177
|
|
178
|
/**
|
179
|
* Namespace: OpenLayers.Easing
|
180
|
*
|
181
|
* Credits:
|
182
|
* Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>
|
183
|
*/
|
184
|
OpenLayers.Easing = {
|
185
|
/**
|
186
|
* Create empty functions for all easing methods.
|
187
|
*/
|
188
|
CLASS_NAME: "OpenLayers.Easing"
|
189
|
};
|
190
|
|
191
|
/**
|
192
|
* Namespace: OpenLayers.Easing.Linear
|
193
|
*/
|
194
|
OpenLayers.Easing.Linear = {
|
195
|
|
196
|
/**
|
197
|
* Function: easeIn
|
198
|
*
|
199
|
* Parameters:
|
200
|
* t - {Float} time
|
201
|
* b - {Float} beginning position
|
202
|
* c - {Float} total change
|
203
|
* d - {Float} duration of the transition
|
204
|
*
|
205
|
* Returns:
|
206
|
* {Float}
|
207
|
*/
|
208
|
easeIn: function(t, b, c, d) {
|
209
|
return c*t/d + b;
|
210
|
},
|
211
|
|
212
|
/**
|
213
|
* Function: easeOut
|
214
|
*
|
215
|
* Parameters:
|
216
|
* t - {Float} time
|
217
|
* b - {Float} beginning position
|
218
|
* c - {Float} total change
|
219
|
* d - {Float} duration of the transition
|
220
|
*
|
221
|
* Returns:
|
222
|
* {Float}
|
223
|
*/
|
224
|
easeOut: function(t, b, c, d) {
|
225
|
return c*t/d + b;
|
226
|
},
|
227
|
|
228
|
/**
|
229
|
* Function: easeInOut
|
230
|
*
|
231
|
* Parameters:
|
232
|
* t - {Float} time
|
233
|
* b - {Float} beginning position
|
234
|
* c - {Float} total change
|
235
|
* d - {Float} duration of the transition
|
236
|
*
|
237
|
* Returns:
|
238
|
* {Float}
|
239
|
*/
|
240
|
easeInOut: function(t, b, c, d) {
|
241
|
return c*t/d + b;
|
242
|
},
|
243
|
|
244
|
CLASS_NAME: "OpenLayers.Easing.Linear"
|
245
|
};
|
246
|
|
247
|
/**
|
248
|
* Namespace: OpenLayers.Easing.Expo
|
249
|
*/
|
250
|
OpenLayers.Easing.Expo = {
|
251
|
|
252
|
/**
|
253
|
* Function: easeIn
|
254
|
*
|
255
|
* Parameters:
|
256
|
* t - {Float} time
|
257
|
* b - {Float} beginning position
|
258
|
* c - {Float} total change
|
259
|
* d - {Float} duration of the transition
|
260
|
*
|
261
|
* Returns:
|
262
|
* {Float}
|
263
|
*/
|
264
|
easeIn: function(t, b, c, d) {
|
265
|
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
266
|
},
|
267
|
|
268
|
/**
|
269
|
* Function: easeOut
|
270
|
*
|
271
|
* Parameters:
|
272
|
* t - {Float} time
|
273
|
* b - {Float} beginning position
|
274
|
* c - {Float} total change
|
275
|
* d - {Float} duration of the transition
|
276
|
*
|
277
|
* Returns:
|
278
|
* {Float}
|
279
|
*/
|
280
|
easeOut: function(t, b, c, d) {
|
281
|
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
282
|
},
|
283
|
|
284
|
/**
|
285
|
* Function: easeInOut
|
286
|
*
|
287
|
* Parameters:
|
288
|
* t - {Float} time
|
289
|
* b - {Float} beginning position
|
290
|
* c - {Float} total change
|
291
|
* d - {Float} duration of the transition
|
292
|
*
|
293
|
* Returns:
|
294
|
* {Float}
|
295
|
*/
|
296
|
easeInOut: function(t, b, c, d) {
|
297
|
if (t==0) return b;
|
298
|
if (t==d) return b+c;
|
299
|
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
300
|
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
301
|
},
|
302
|
|
303
|
CLASS_NAME: "OpenLayers.Easing.Expo"
|
304
|
};
|
305
|
|
306
|
/**
|
307
|
* Namespace: OpenLayers.Easing.Quad
|
308
|
*/
|
309
|
OpenLayers.Easing.Quad = {
|
310
|
|
311
|
/**
|
312
|
* Function: easeIn
|
313
|
*
|
314
|
* Parameters:
|
315
|
* t - {Float} time
|
316
|
* b - {Float} beginning position
|
317
|
* c - {Float} total change
|
318
|
* d - {Float} duration of the transition
|
319
|
*
|
320
|
* Returns:
|
321
|
* {Float}
|
322
|
*/
|
323
|
easeIn: function(t, b, c, d) {
|
324
|
return c*(t/=d)*t + b;
|
325
|
},
|
326
|
|
327
|
/**
|
328
|
* Function: easeOut
|
329
|
*
|
330
|
* Parameters:
|
331
|
* t - {Float} time
|
332
|
* b - {Float} beginning position
|
333
|
* c - {Float} total change
|
334
|
* d - {Float} duration of the transition
|
335
|
*
|
336
|
* Returns:
|
337
|
* {Float}
|
338
|
*/
|
339
|
easeOut: function(t, b, c, d) {
|
340
|
return -c *(t/=d)*(t-2) + b;
|
341
|
},
|
342
|
|
343
|
/**
|
344
|
* Function: easeInOut
|
345
|
*
|
346
|
* Parameters:
|
347
|
* t - {Float} time
|
348
|
* b - {Float} beginning position
|
349
|
* c - {Float} total change
|
350
|
* d - {Float} duration of the transition
|
351
|
*
|
352
|
* Returns:
|
353
|
* {Float}
|
354
|
*/
|
355
|
easeInOut: function(t, b, c, d) {
|
356
|
if ((t/=d/2) < 1) return c/2*t*t + b;
|
357
|
return -c/2 * ((--t)*(t-2) - 1) + b;
|
358
|
},
|
359
|
|
360
|
CLASS_NAME: "OpenLayers.Easing.Quad"
|
361
|
};
|