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

    Constructors

    constructor

    Properties

    _chainedTweens _delayTime _duration _easingFunction _interpolationFunction _isPaused _isRunning _lastTick _lastUpdate _object _onCompleteCallback _onStartCallback _onStartCallbackFired _onUpdateCallback _repeat _reversed _startTime _tweenTimeTracker _valuesEnd _valuesStart _valuesStartRepeat _yoyo isPersistent updateWhenPaused

    Accessors

    Easing Interpolation

    Methods

    chain delay easing interpolation onComplete onStart onUpdate repeat start stop to yoyo

    Constructors

    Properties

    _chainedTweens

    _chainedTweens: Tween[]

    _delayTime

    _delayTime: number

    _duration

    _duration: number

    _easingFunction

    _easingFunction: EasingFunction

    _interpolationFunction

    _interpolationFunction: InterpolationFunction

    _isPaused

    _isPaused: boolean

    _isRunning

    _isRunning: boolean

    _lastTick

    _lastTick: number

    _lastUpdate

    _lastUpdate: number

    _object

    _object: object

    _onCompleteCallback

    _onCompleteCallback: OnCompleteCallback<object> | null

    _onStartCallback

    _onStartCallback: OnStartCallback<object> | null

    _onStartCallbackFired

    _onStartCallbackFired: boolean

    _onUpdateCallback

    _onUpdateCallback: OnUpdateCallback<object> | null

    _repeat

    _repeat: number

    _reversed

    _reversed: boolean

    _startTime

    _startTime: number | null

    _tweenTimeTracker

    _tweenTimeTracker: number

    _valuesEnd

    _valuesEnd: Record<string, unknown>

    _valuesStart

    _valuesStart: Record<string, unknown>

    _valuesStartRepeat

    _valuesStartRepeat: Record<string, unknown>

    _yoyo

    _yoyo: boolean
    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

    Accessors

    • 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. Each family provides In, Out, and InOut variants.

      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;
          };
      }

      Easing for the full list

      me.Tween.Easing.Quadratic.InOut
      me.Tween.Easing.Bounce.Out
      me.Tween.Easing.Elastic.In
    • 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

    Methods

    • set the interpolation function

      Parameters

      • interpolation: InterpolationFunction

        interpolation function

      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;
            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)

        • 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