bug: animate() doesn't work if called with a delay after the animate component is created

[themerk]

Describe the bug

Animations (specifically with { loops: 1 }) work as expected if started at the same time as the game object is created.

But if animations are applied later (either with wait(), or on a key press etc) the object just jumps to the final keyframe, without any animation.

The problem appears to be the initial timestamp being set when the animate component is created, rather than when the animation is started:

kaplay/src/components/misc/animate.ts

Lines 509 to 511 in b89b97c

	export function animate(gopts: AnimateCompOpt = {}): AnimateComp {
	const channels: AnimateChannel[] = [];
	let t = 0;

This would probably work ok if .use(animate()) is called just before applying the animation, but that's a bit unintuitive and a real pain when an animation is a one-shot, non-looping sequence, like you might have on a button press or collision. Or if you try to animate multiple properties with different, overlapping start times.

Version

Replicated in both 3001.0.2 and 4000.0.0-alpha15

To Reproduce

Example on KAPLAYGROUND

kaplay({
  width: 500,
  height: 500,
});

const red = add([
  circle(30),
  color(RED),
  pos(150, 250),
  scale(),
  animate()
]);

const blue = add([
  circle(30),
  color(BLUE),
  pos(350, 250),
  scale(),
  animate()
]);

// Works ok because the game object was only just created
red.animate("scale", [vec2(1), vec2(2)], { duration: 0.5, loops: 1 })

// Just jumps to the final frame
wait(1, () => {
  blue.animate("scale", [vec2(1), vec2(2)], { duration: 0.5, loops: 1 })
})

Expected behavior

If a game object has the animate() component added during its creation, we should be free to call .animate at any time in the future and have the animation play as expected.

[mflerackers]

There's a seek method for that reason, to seek to time 0.

[themerk]

Ah I see. I don't think that's mentioned in the docs.

I guess it just comes down to unintuitive behaviour for someone new to the library. It makes sense to have a seek function for advanced manipulation of an animation. But I just expected the animate function to... animate. Since my first use of it was on a button press, it wasn't at all obvious why I was getting that behaviour.

Should any call to animate() just automatically seek to time 0?

[mflerackers]

I'll rather leave the control to the user. Animate is originally made to define an animation, then play it.