Preparing search index...
The search index is not available

Class Tween

Javascript Tweening Engine

Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equation

author sole / http://soledadpenades.com
author mr.doob / http://mrdoob.com
author Robert Eisele / http://www.xarg.org
author Philippe / http://philippe.elsass.me
author Robert Penner / http://www.robertpenner.com/easing_terms_of_use.html
author Paul Lewis / http://www.aerotwist.com/
author lechecacharro
author Josh Faul / http://jocafa.com/

Index

Constructors

constructor

new Tween(object): Tween

Parameters

object: object
object on which to apply the tween

Returns Tween

Example

// add a tween to change the object pos.x and pos.y variable to 200 in 3 seconds
tween = newme.Tween(myObject.pos).to({
x:200,
y:200,
 }, {
duration:3000,
easing:me.Tween.Easing.Bounce.Out,
autoStart :true
}).onComplete(myFunc);

Properties

_chainedTweens

_chainedTweens: Tween []

_delayTime

_delayTime: number

_duration

_duration: number

_easingFunction

_easingFunction: EasingFunction

_interpolationFunction

_interpolationFunction: InterpolationFunction

_object

_object: object

_onCompleteCallback

_onCompleteCallback: null | OnCompleteCallback<object>

_onStartCallback

_onStartCallback: null | OnStartCallback<object>

_onStartCallbackFired

_onStartCallbackFired: boolean

_onUpdateCallback

_onUpdateCallback: null | OnUpdateCallback<object>

_repeat

_repeat: number

_reversed

_reversed: boolean

_startTime

_startTime: null | number

_tweenTimeTracker

_tweenTimeTracker: number

_valuesEnd

_valuesEnd: Record <string, unknown>

_valuesStart

_valuesStart: Record <string, unknown>

_valuesStartRepeat

_valuesStartRepeat: Record <string, unknown>

_yoyo

_yoyo: boolean

isPersistent

isPersistent: boolean

isRenderable

isRenderable: boolean

updateWhenPaused

updateWhenPaused: boolean

Accessors

`Static`Easing

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);
};
}
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);
};
}
- Back: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Bounce: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Circular: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Cubic: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Elastic: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Exponential: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Linear: {
  None: ((k: number) => number);
  }
  - None: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Quadratic: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Quartic: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Quintic: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Sinusoidal: {
  In: ((k: number) => number);
  InOut: ((k: number) => number);
  Out: ((k: number) => number);
  }
  - In: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - InOut: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
  - Out: ((k: number) => number)
    - - (k): number
      - Parameters
        k: number
        Returns number
- Defined in packages/melonjs/src/tweens/tween.ts:455

`Static`Interpolation

get Interpolation(): {
Bezier: ((v: number[], k: number) => number);
CatmullRom: ((v: number[], k: number) => number);
Linear: ((v: number[], k: number) => number);
}
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)
  - - (v, k): number
    - Parameters
      v: number[]
      k: number
      Returns number
- CatmullRom: ((v: number[], k: number) => number)
  - - (v, k): number
    - Parameters
      v: number[]
      k: number
      Returns number
- Linear: ((v: number[], k: number) => number)
  - - (v, k): number
    - Parameters
      v: number[]
      k: number
      Returns number
- Defined in packages/melonjs/src/tweens/tween.ts:458

Methods

chain

chain(...tweens): Tween
chain the tween
Parameters
- Rest...tweens: Tween []
  Tween(s) to be chained
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:310

delay

delay(amount): Tween
delay the tween
Parameters
- amount: number
  delay amount expressed in milliseconds
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:259

easing

easing(easing): Tween
set the easing function
Parameters
- easing: EasingFunction
  easing function
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:290

interpolation

interpolation(interpolation): Tween
set the interpolation function
Parameters
- interpolation: InterpolationFunction
  interpolation function
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:300

onComplete

onComplete(onCompleteCallback): Tween
onComplete callback
Parameters
- onCompleteCallback: OnCompleteCallback<object>
  callback
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:340

onStart

onStart(onStartCallback): Tween
onStart callback
Parameters
- onStartCallback: OnStartCallback<object>
  callback
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:320

onUpdate

onUpdate(onUpdateCallback): Tween
onUpdate callback
Parameters
- onUpdateCallback: OnUpdateCallback<object>
  callback
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:330

repeat

repeat(times): Tween
Repeat the tween
Parameters
- times: number
  amount of times the tween should be repeated
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:269

start

start(time?): Tween
start the tween
Parameters
- Optionaltime: number = ...
  the current time when the tween was started
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:209

stop

stop(): Tween
stop the tween

Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:248

to

to(properties, options?): Tween
object properties to be updated and duration
Parameters
- properties: Record <string, unknown>
  hash of properties
- Optionaloptions: {
  autoStart?: boolean;
  delay?: number;
  duration?: number;
  easing?: EasingFunction ;
  interpolation?: InterpolationFunction ;
  repeat?: number;
  yoyo?: boolean;
  }
  object of tween properties, or a duration if a numeric value is passed
  - OptionalautoStart?: boolean
    allow this tween to start automatically. Otherwise call me.Tween.start().
  - Optionaldelay?: number
    delay amount expressed in milliseconds
  - Optionalduration?: number
    tween duration
  - Optionaleasing?: EasingFunction
    easing function
  - Optionalinterpolation?: InterpolationFunction
    interpolation function
  - Optionalrepeat?: number
    amount of times the tween should be repeated
  - Optionalyoyo?: boolean
    allows the tween to bounce back to their original value when finished. To be used together with repeat to create endless loops.
Returns Tween
this instance for object chaining
- Defined in packages/melonjs/src/tweens/tween.ts:161

yoyo

yoyo(yoyo): Tween
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
- Defined in packages/melonjs/src/tweens/tween.ts:280

Settings

Member Visibility

Theme

Class Tween

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Tween

Example

Properties

_chainedTweens

_delayTime

_duration

_easingFunction

_interpolationFunction

_object

_onCompleteCallback

_onStartCallback

_onStartCallbackFired

_onUpdateCallback

_repeat

_reversed

_startTime

_tweenTimeTracker

_valuesEnd

_valuesStart

_valuesStartRepeat

_yoyo

isPersistent

isRenderable

updateWhenPaused

Accessors

StaticEasing

Back: { In: ((k: number) => number); InOut: ((k: number) => number); Out: ((k: number) => number); }

In: ((k: number) => number)

Parameters

Returns number

InOut: ((k: number) => number)

Parameters

Returns number

Out: ((k: number) => number)

Parameters

Returns number

Bounce: { In: ((k: number) => number); InOut: ((k: number) => number); Out: ((k: number) => number); }

In: ((k: number) => number)

Parameters

Returns number

InOut: ((k: number) => number)

Parameters

Returns number

Out: ((k: number) => number)

Parameters

Returns number

Circular: { In: ((k: number) => number); InOut: ((k: number) => number); Out: ((k: number) => number); }

In: ((k: number) => number)

Parameters

Returns number

InOut: ((k: number) => number)

Parameters

Returns number

Out: ((k: number) => number)

Parameters

Returns number

Cubic: { In: ((k: number) => number); InOut: ((k: number) => number); Out: ((k: number) => number); }

In: ((k: number) => number)

Parameters

Returns number

InOut: ((k: number) => number)

Parameters

Returns number

Out: ((k: number) => number)

Parameters

Returns number

Elastic: { In: ((k: number) => number); InOut: ((k: number) => number); Out: ((k: number) => number); }

In: ((k: number) => number)

Parameters

Returns number

InOut: ((k: number) => number)

`Static`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);
}

`Static`Interpolation

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