Skip to content

Animate

Marc Flerackers edited this page Aug 18, 2025 · 4 revisions

Animate works, but its API right now is confusing for new users:

  • Animate keeps it's own timeline, which is updated automatically. While convenient, people don't know they need to reset this timeline when they want to play the constructed animation.
  • Animate saves a hierarchical animation, but synced play is not provided.

Component methods

animation.get(name: string)

Returns the specified animation in order to define it.

const anim = obj.animation.get("idle");
anim.animate("opacity", [1.0, 0.0, 1.0]); // Overwrites if this track already exists

animation.play(name?: string, opt?: PlayOpt)

To make it easier for users, and more practical, animations will be named. So obj.animation.play("walk") and obj.animation.play("idle") will reset the timeline and play the specified animations. Omitting the name will play the default animation. PlayOpt will contain options such as blending parameters to blend between animations.

obj.animation.play("idle");

animation.stop(name?: string)

Stops the animation if any.

obj.animation.stop();

Animation methods

animate(name: string, values: T[], opt? AnimateOpt)

Applies animation to a property.

const anim = obj.animation.get("idle");
anim.animate("opacity", [1.0, 0.0, 1.0]); // Overwrites if this track already exists
anim.animate("pos", [vec2(0,0), vec2(0,-2), vec2(0,0)]);

Applies animation to a descendant's property.

const anim = obj.animation.get("idle");
anim.animate("/upper-arm/lower/arm/hand/angle", [0.0, 45.0, 0.0]);

Clone this wiki locally