animate

param opt- Options for the animate component. See

// First example
let movingBean = add([
      sprite("bean"),
      pos(50, 150),
      anchor("center"),
      animate(),
]);
// Moving right to left using ping-pong
movingBean.animate("pos", [vec2(50, 150), vec2(150, 150)], {
    duration: 2,
    direction: "ping-pong",
});

// Second example
const obj = add([
    area(),
    color("#FF0000"),
    animate(),
]);
// The internal clock starts when the object is added.
// We need to reset the animation when the object is hovered.
obj.onHover(() => {
    obj.animation.seek(0); // reset the animation to the start
    obj.animate(
        "color",
        // We can use the current color property as the start value.
        // It doesn't make sense to have only one value in the array as it's a transition.
        [obj.color, Color.fromHex("#0000FF")],
        { duration: 0.5, loops: 1 },
});

obj.onHoverEnd(() => {
    // We need to unanimate the color property to reset it to the original value.
    obj.unanimate("color");
    obj.color = Color.fromHex("#FF0000");
});

returns The animate comp.

since v3001.0

group Components

subgroup Behaviour