melonJS
    Preparing search index...

    Class Tween

    A tweening engine for smoothly interpolating object properties over time. Based on tween.js with optimised Robert Penner's equations.

    Tweens use an event-based lifecycle — on start() the tween subscribes to the game loop events (TICK, GAME_AFTER_UPDATE, STATE_PAUSE, STATE_RESUME, GAME_RESET) and automatically unsubscribes on completion or stop(). They do not need to be added to a container.

    // basic usage
    new me.Tween(myObject.pos)
        .to({ x: 200, y: 200 }, { duration: 3000, easing: me.Tween.Easing.Bounce.Out })
        .onComplete(() => console.log("done!"))
        .start();

    // auto-start with options
    new me.Tween(myObject.pos).to({ x: 200 }, {
        duration: 1000,
        easing: me.Tween.Easing.Quadratic.InOut,
        yoyo: true,
        repeat: Infinity,
        autoStart: true,
    });
    Index
    constructor
    isPersistent updateWhenPaused
    Easing Interpolation
    chain delay easing interpolation onComplete onStart onUpdate repeat repeatDelay start stop to yoyo
    isPersistent: boolean

    whether the tween should persist across state changes (not auto-stopped on game reset)

    false
    updateWhenPaused: boolean

    whether the tween should keep running when the game is paused

    false
    • get Easing(): {
          Back: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Bounce: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Circular: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Cubic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Elastic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Exponential: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Linear: { None: (k: number) => number };
          Quadratic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Quartic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Quintic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Sinusoidal: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
      }

      Available easing functions, accessed via Tween.Easing.

      Eleven families, each providing In, Out and InOut. In applies the curve at the start, Out at the end, and InOut at both. Out is what most UI wants: the value arrives decisively rather than creeping in.

      family shape reach for it when
      Linear.None no curve at all the value IS the progress, e.g. a loading bar
      Quadratic Cubic Quartic Quintic progressively sharper power curves general motion; higher powers start slower and finish harder
      Sinusoidal gentlest of all a drift or a breath that should not call attention
      Exponential extreme, near-instant at one end something that snaps
      Circular hard, like the quarter of a circle a mechanical slide
      Back overshoots past the target and settles back impact: a stamp, a button press, anything that should land rather than arrive
      Elastic overshoots repeatedly, oscillating springy, cartoon motion
      Bounce lands and bounces, settling something falling onto a surface

      Back and Elastic overshoot, so the value LEAVES the range between your start and end: clamp anything that cannot take it, an opacity or a colour channel in particular. Note the direction of the overshoot follows the direction of travel, so a value tweened DOWN to its target overshoots below it.

      Returns {
          Back: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Bounce: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Circular: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Cubic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Elastic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Exponential: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Linear: { None: (k: number) => number };
          Quadratic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Quartic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Quintic: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
          Sinusoidal: {
              In: (k: number) => number;
              InOut: (k: number) => number;
              Out: (k: number) => number;
          };
      }

      https://easings.net/ for a visual reference of every curve

      me.Tween.Easing.Quadratic.InOut
      me.Tween.Easing.Bounce.Out
      me.Tween.Easing.Elastic.In

      // a stamp: scale falls to 1 and springs through it
      const driver = { scale: 5 };
      new me.Tween(driver)
          .to({ scale: 1 }, { duration: 420 })
          .easing(me.Tween.Easing.Back.Out)
          .onUpdate(() => {
              label.currentTransform.identity();
              label.scale(driver.scale);
          })
          .start();
    • get Interpolation(): {
          Bezier: (v: number[], k: number) => number;
          CatmullRom: (v: number[], k: number) => number;
          Linear: (v: number[], k: number) => number;
      }

      Available interpolation functions for tweening array values.

      Returns {
          Bezier: (v: number[], k: number) => number;
          CatmullRom: (v: number[], k: number) => number;
          Linear: (v: number[], k: number) => number;
      }

      • Bezier: (v: number[], k: number) => number

        Smooth Bezier curve interpolation through all array values.

      • CatmullRom: (v: number[], k: number) => number

        Smooth Catmull-Rom spline interpolation — best for path-following tweens.

      • Linear: (v: number[], k: number) => number

        Piecewise linear interpolation between consecutive array values.

      Interpolation

      me.Tween.Interpolation.Linear
      me.Tween.Interpolation.Bezier
      me.Tween.Interpolation.CatmullRom

    • onComplete callback

      Parameters

      • onCompleteCallback: OnCompleteCallback<object>

        callback

      Returns Tween

      this instance for object chaining

    • Start the tween. Subscribes to game loop events and begins interpolation.

      Parameters

      • Optionaltime: number = ...

        the start time (defaults to current game time)

      Returns Tween

      this instance for object chaining

    • Define the target property values and tween options.

      Parameters

      • properties: Record<string, unknown>

        target property values to tween to (e.g. { x: 200, y: 100 })

      • Optionaloptions: {
            autoStart?: boolean;
            delay?: number;
            duration?: number;
            easing?: EasingFunction;
            interpolation?: InterpolationFunction;
            repeat?: number;
            repeatDelay?: number;
            yoyo?: boolean;
        }

        tween configuration

        • OptionalautoStart?: boolean

          start the tween immediately without calling start()

        • Optionaldelay?: number

          delay before starting, in milliseconds

        • Optionalduration?: number

          tween duration in milliseconds

        • Optionaleasing?: EasingFunction

          easing function (e.g. Tween.Easing.Quadratic.InOut)

        • Optionalinterpolation?: InterpolationFunction

          interpolation function for array values

        • Optionalrepeat?: number

          number of times to repeat (use Infinity for endless loops)

        • OptionalrepeatDelay?: number

          delay in milliseconds before each repeat cycle

        • Optionalyoyo?: boolean

          bounce back to original values when finished (use with repeat)

      Returns Tween

      this instance for object chaining

    • Allows the tween to bounce back to their original value when finished. To be used together with repeat to create endless loops.

      Parameters

      • yoyo: boolean

        flag

      Returns Tween

      this instance for object chaining

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods