Manages an animation timeline, with multiple channels that can be running at different rates, durations, etc. Many methods (play
, pause
) assume that the update
method is being called once per frame with a "global time". This automatically done for AnimationLoop.timeline
object.
The key concept at work in the Timeline
is running multiple time frames in parallel:
Timeline
to determine the rate at which to play.Automatic update usage (assume update
method is being called once per frame):
animationLoop.attachTimeline(new Timeline());
const timeline = animationLoop.timeline;
const channel1 = timeline.addChannel({
rate: 0.5,
duration: 4000,
repeat: Number.POSITIVE_INFINITY
});
const channel2 = timeline.addChannel({
rate: 2,
delay: 500,
duration: 1000,
repeat: 3
});
timeline.pause();
timeline.play();
model.setUniforms({
uValue1: timeline.getTime(channel1);
uValue2: timeline.getTime(channel2);
});
Manual usage:
const timeline = new Timeline();
const channel1 = timeline.addChannel({
rate: 0.5,
duration: 4000,
repeat: Number.POSITIVE_INFINITY
});
const channel2 = timeline.addChannel({
rate: 2,
delay: 500,
duration: 1000,
repeat: 3
});
timeline.setTime(500);
model.setUniforms({
uValue1: timeline.getTime(channel1);
uValue2: timeline.getTime(channel2);
});
Add a new channel to the timeline. Returns a handle to the channel that can be use for subsequent interactions. Valid propeties are:
rate
the speed of the channel's time relative to timeline time.delay
offset into timeline time at which channel time starts elapsing, in timeline time units.duration
the length of the channel time frame, in timeline time units.repeat
how many time to repeat channel time's timeline. Only meaningful if duration
is finite.Remove a channel from the timeline. handle
should be a value that was returned by addChannel
.
Returns whether the channel's time has completely elapsed.
Return the current time of the channel indicated by handle
. If no handle is provided, return timeline time.
Set the timeline time to the given value.
Allow timeline time to be updated by calls to update
.
Prevent timeline time from being updated by calls to update
.
Reset timeline time to 0
.
Attach an animation object (can be any object with a setTime
method, e.g. KeyFrames, GLTFAnimator
) to the timeline, optionally attached to a specific channel referenced by channelHandle
.
The animation object's time will be updated whenever the timeline updates. Returns a handle that can be used to reference the animation attachement.
Detach an animation object from the timeline. handle
should be a value that was returned by attachAnimation
.
Expected to be called once per frame, with whatever is considered the "system time". Required for play
and pause
to work properly.