Skip to content

Commit 9042640

Browse files
photonstormphotonstorm
committed
Timeline callbacks added and working along with loop and delays
1 parent 0bdfeb2 commit 9042640

5 files changed

Lines changed: 198 additions & 20 deletions

File tree

‎v3/src/tween/builder/TimelineBuilder.js‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var GetNewValue = require('./GetNewValue');
66
var GetTargets = require('./GetTargets');
77
var GetTweens = require('./GetTweens');
88
var GetValue = require('../../utils/object/GetValue');
9+
var GetAdvancedValue = require('../../utils/object/GetAdvancedValue');
910
var Timeline = require('../timeline/Timeline');
1011
var TweenBuilder = require('./TweenBuilder');
1112

@@ -22,8 +23,20 @@ var TimelineBuilder = function (manager, config)
2223

2324
defaults.targets = GetTargets(config);
2425

26+
// totalDuration: If specified each tween in the Timeline is given an equal portion of the totalDuration
27+
28+
var totalDuration = GetAdvancedValue(config, 'totalDuration', 0);
29+
30+
if (totalDuration > 0)
31+
{
32+
defaults.duration = Math.floor(totalDuration / tweens.length);
33+
}
34+
else
35+
{
36+
defaults.duration = GetNewValue(config, 'duration', defaults.duration);
37+
}
38+
2539
defaults.delay = GetNewValue(config, 'delay', defaults.delay);
26-
defaults.duration = GetNewValue(config, 'duration', defaults.duration);
2740
defaults.easeParams = GetValue(config, 'easeParams', defaults.easeParams);
2841
defaults.ease = GetEaseFunction(GetValue(config, 'ease', defaults.ease), defaults.easeParams);
2942
defaults.hold = GetNewValue(config, 'hold', defaults.hold);
@@ -42,6 +55,73 @@ var TimelineBuilder = function (manager, config)
4255
timeline.queue(TweenBuilder(manager, tweens[i], defaults));
4356
}
4457

58+
timeline.completeDelay = GetAdvancedValue(config, 'completeDelay', 0);
59+
timeline.loop = Math.round(GetAdvancedValue(config, 'loop', 0));
60+
timeline.loopDelay = Math.round(GetAdvancedValue(config, 'loopDelay', 0));
61+
timeline.paused = GetBoolean(config, 'paused', false);
62+
timeline.useFrames = GetBoolean(config, 'useFrames', false);
63+
64+
// Callbacks
65+
66+
var scope = GetValue(config, 'callbackScope', timeline);
67+
68+
var timelineArray = [ timeline ];
69+
70+
var onStart = GetValue(config, 'onStart', false);
71+
72+
// The Start of the Timeline
73+
if (onStart)
74+
{
75+
var onStartScope = GetValue(config, 'onStartScope', scope);
76+
var onStartParams = GetValue(config, 'onStartParams', []);
77+
78+
timeline.setCallback('onStart', onStart, timelineArray.concat(onStartParams), onStartScope);
79+
}
80+
81+
var onUpdate = GetValue(config, 'onUpdate', false);
82+
83+
// Every time the Timeline updates (regardless which Tweens are running)
84+
if (onUpdate)
85+
{
86+
var onUpdateScope = GetValue(config, 'onUpdateScope', scope);
87+
var onUpdateParams = GetValue(config, 'onUpdateParams', []);
88+
89+
timeline.setCallback('onUpdate', onUpdate, timelineArray.concat(onUpdateParams), onUpdateScope);
90+
}
91+
92+
var onLoop = GetValue(config, 'onLoop', false);
93+
94+
// Called when the whole Timeline loops
95+
if (onLoop)
96+
{
97+
var onLoopScope = GetValue(config, 'onLoopScope', scope);
98+
var onLoopParams = GetValue(config, 'onLoopParams', []);
99+
100+
timeline.setCallback('onLoop', onLoop, timelineArray.concat(onLoopParams), onLoopScope);
101+
}
102+
103+
var onYoyo = GetValue(config, 'onYoyo', false);
104+
105+
// Called when a Timeline yoyos
106+
if (onYoyo)
107+
{
108+
var onYoyoScope = GetValue(config, 'onYoyoScope', scope);
109+
var onYoyoParams = GetValue(config, 'onYoyoParams', []);
110+
111+
timeline.setCallback('onYoyo', onYoyo, timelineArray.concat(null, onYoyoParams), onYoyoScope);
112+
}
113+
114+
var onComplete = GetValue(config, 'onComplete', false);
115+
116+
// Called when the Timeline completes, after the completeDelay, etc.
117+
if (onComplete)
118+
{
119+
var onCompleteScope = GetValue(config, 'onCompleteScope', scope);
120+
var onCompleteParams = GetValue(config, 'onCompleteParams', []);
121+
122+
timeline.setCallback('onComplete', onComplete, timelineArray.concat(onCompleteParams), onCompleteScope);
123+
}
124+
45125
return timeline;
46126
};
47127

‎v3/src/tween/timeline/Timeline.js‎

Lines changed: 105 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ var Timeline = new Class({
6969
this.callbacks = {
7070
onComplete: null,
7171
onLoop: null,
72-
onRepeat: null,
7372
onStart: null,
7473
onUpdate: null,
7574
onYoyo: null
@@ -162,8 +161,8 @@ var Timeline = new Class({
162161
calcDuration: function ()
163162
{
164163
var prevEnd = 0;
165-
166-
this.totalDuration = 0;
164+
var totalDuration = 0;
165+
var offsetDuration = 0;
167166

168167
for (var i = 0; i < this.totalData; i++)
169168
{
@@ -178,6 +177,11 @@ var Timeline = new Class({
178177
// An actual number, so it defines the start point from the beginning of the timeline
179178
tween.calculatedOffset = tween.offset;
180179

180+
if (tween.offset === 0)
181+
{
182+
offsetDuration = 0;
183+
}
184+
181185
// console.log('Timeline.calcDuration', i, 'absolute', tween.calculatedOffset);
182186
}
183187
else if (this.isOffsetRelative(tween.offset))
@@ -191,7 +195,7 @@ var Timeline = new Class({
191195
else
192196
{
193197
// Sequential
194-
tween.calculatedOffset = this.totalDuration;
198+
tween.calculatedOffset = offsetDuration;
195199

196200
// console.log('Timeline.calcDuration', i, 'sequential', tween.calculatedOffset);
197201
}
@@ -200,7 +204,22 @@ var Timeline = new Class({
200204

201205
// console.log('Span', i, tween.calculatedOffset, 'to', prevEnd);
202206

203-
this.totalDuration += tween.totalDuration;
207+
totalDuration += tween.totalDuration;
208+
offsetDuration += tween.totalDuration;
209+
}
210+
211+
// Excludes loop values
212+
this.duration = totalDuration;
213+
214+
this.loopCounter = (this.loop === -1) ? 999999999999 : this.loop;
215+
216+
if (this.loopCounter > 0)
217+
{
218+
this.totalDuration = this.duration + this.completeDelay + ((this.duration + this.loopDelay) * this.loopCounter);
219+
}
220+
else
221+
{
222+
this.totalDuration = this.duration + this.completeDelay;
204223
}
205224
},
206225

@@ -223,6 +242,26 @@ var Timeline = new Class({
223242
}
224243
},
225244

245+
resetTweens: function (resetFromLoop)
246+
{
247+
for (var i = 0; i < this.totalData; i++)
248+
{
249+
var tween = this.data[i];
250+
251+
tween.play(resetFromLoop);
252+
}
253+
},
254+
255+
setCallback: function (type, callback, params, scope)
256+
{
257+
if (Timeline.TYPES.indexOf(type) !== -1)
258+
{
259+
this.callbacks[type] = { func: callback, scope: scope, params: params };
260+
}
261+
262+
return this;
263+
},
264+
226265
play: function ()
227266
{
228267
if (this.state === TWEEN_CONST.ACTIVE)
@@ -240,15 +279,7 @@ var Timeline = new Class({
240279
}
241280
else
242281
{
243-
// Reset the TweenData
244-
// this.resetTweenData();
245-
246-
for (var i = 0; i < this.totalData; i++)
247-
{
248-
var tween = this.data[i];
249-
250-
tween.play();
251-
}
282+
this.resetTweens(false);
252283

253284
this.state = TWEEN_CONST.ACTIVE;
254285
}
@@ -261,6 +292,56 @@ var Timeline = new Class({
261292
}
262293
},
263294

295+
nextState: function ()
296+
{
297+
if (this.loopCounter > 0)
298+
{
299+
this.resetTweens(true);
300+
301+
// Reset the elapsed time
302+
// TODO: Probably ought to be set to the remainder from elapsed - duration
303+
// as the tweens nearly always over-run by a few ms due to rAf
304+
305+
this.elapsed = 0;
306+
this.progress = 0;
307+
308+
this.loopCounter--;
309+
310+
var onLoop = this.callbacks.onLoop;
311+
312+
if (onLoop)
313+
{
314+
onLoop.func.apply(onLoop.scope, onLoop.params);
315+
}
316+
317+
if (this.loopDelay > 0)
318+
{
319+
this.countdown = this.loopDelay;
320+
this.state = TWEEN_CONST.LOOP_DELAY;
321+
}
322+
else
323+
{
324+
this.state = TWEEN_CONST.ACTIVE;
325+
}
326+
}
327+
else if (this.completeDelay > 0)
328+
{
329+
this.countdown = this.completeDelay;
330+
this.state = TWEEN_CONST.COMPLETE_DELAY;
331+
}
332+
else
333+
{
334+
var onComplete = this.callbacks.onComplete;
335+
336+
if (onComplete)
337+
{
338+
onComplete.func.apply(onComplete.scope, onComplete.params);
339+
}
340+
341+
this.state = TWEEN_CONST.PENDING_REMOVE;
342+
}
343+
},
344+
264345
// Returns 'true' if this Timeline has finished and should be removed from the Tween Manager
265346
// Otherwise, returns false
266347
update: function (timestamp, delta)
@@ -301,12 +382,17 @@ var Timeline = new Class({
301382
}
302383
}
303384

385+
var onUpdate = this.callbacks.onUpdate;
386+
387+
if (onUpdate)
388+
{
389+
onUpdate.func.apply(onUpdate.scope, onUpdate.params);
390+
}
391+
304392
// Anything still running? If not, we're done
305393
if (stillRunning === 0)
306394
{
307-
// this.nextState();
308-
309-
this.state = TWEEN_CONST.PENDING_REMOVE;
395+
this.nextState();
310396
}
311397

312398
break;
@@ -389,4 +475,6 @@ var Timeline = new Class({
389475
}
390476
});
391477

478+
Timeline.TYPES = [ 'onStart', 'onUpdate', 'onLoop', 'onComplete', 'onYoyo' ];
479+
392480
module.exports = Timeline;

‎v3/src/tween/tween/components/Play.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var TWEEN_CONST = require('../const');
22

3-
var Play = function ()
3+
var Play = function (resetFromTimeline)
44
{
55
if (this.state === TWEEN_CONST.ACTIVE)
66
{
@@ -9,7 +9,7 @@ var Play = function ()
99

1010
if (this.timeline)
1111
{
12-
this.resetTweenData();
12+
this.resetTweenData(resetFromTimeline);
1313

1414
if (this.calculatedOffset === 0)
1515
{

‎v3/src/tween/tween/components/ResetTweenData.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ var ResetTweenData = function (resetFromLoop)
1919
tweenData.current = tweenData.start;
2020
tweenData.end = tweenData.endCache;
2121

22+
// Apply to target?
23+
// tweenData.target[tweenData.key] = tweenData.current;
24+
2225
tweenData.state = TWEEN_CONST.PLAYING_FORWARD;
2326
}
2427
else if (tweenData.delay > 0)

‎v3/src/tween/tween/components/UpdateTweenData.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ var UpdateTweenData = function (tween, tweenData, delta)
151151

152152
var forward = (tweenData.state === TWEEN_CONST.PLAYING_FORWARD);
153153
var progress = elapsed / duration;
154+
154155
var v;
155156

156157
if (forward)
@@ -180,6 +181,9 @@ var UpdateTweenData = function (tween, tweenData, delta)
180181
{
181182
if (forward)
182183
{
184+
// tweenData.current = tweenData.end;
185+
// tweenData.target[tweenData.key] = tweenData.current;
186+
183187
if (tweenData.hold > 0)
184188
{
185189
tweenData.elapsed = tweenData.hold;
@@ -193,6 +197,9 @@ var UpdateTweenData = function (tween, tweenData, delta)
193197
}
194198
else
195199
{
200+
// tweenData.current = tweenData.start;
201+
// tweenData.target[tweenData.key] = tweenData.current;
202+
196203
tweenData.state = SetStateFromStart(tween, tweenData);
197204
}
198205
}

0 commit comments

Comments
 (0)