Class Tween<T>

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/

Type Parameters

T extends Record<string, unknown>

Constructors

constructor

new Tween<T>(object): Tween<T>

Type Parameters

T extends Record<string, unknown>

Parameters

object: T
object on which to apply the tween

Returns Tween<T>

Example

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

Properties

_chainedTweens

_chainedTweens: Tween<Record<string, unknown>>[]

_delayTime

_delayTime: number

_duration

_duration: number

_easingFunction

_easingFunction: EasingFunction

_interpolationFunction

_interpolationFunction: InterpolationFunction

_object

_object: T

_onCompleteCallback

_onCompleteCallback: null | OnCompleteCallback<T>

_onStartCallback

_onStartCallback: null | OnStartCallback<T>

_onStartCallbackFired

_onStartCallbackFired: boolean

_onUpdateCallback

_onUpdateCallback: null | OnUpdateCallback<T>

_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: {};
    Quintic: {};
    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: {};
    Quintic: {};
    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: {}
- Quintic: {}
- 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 src/tweens/tween.ts:443

`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 src/tweens/tween.ts:446

Methods

chain

chain(...tweens): Tween<T>
chain the tween
Parameters
- Rest...tweens: Tween<any>[]
  Tween(s) to be chained
Returns Tween<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:300

delay

delay(amount): Tween<T>
delay the tween
Parameters
- amount: number
  delay amount expressed in milliseconds
Returns Tween<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:249

easing

easing(easing): Tween<T>
set the easing function
Parameters
- easing: EasingFunction
  easing function
Returns Tween<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:280

interpolation

interpolation(interpolation): Tween<T>
set the interpolation function
Parameters
- interpolation: InterpolationFunction
  interpolation function
Returns Tween<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:290

onComplete

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

onStart

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

onUpdate

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

repeat

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

start

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

stop

stop(): Tween<T>
stop the tween

Returns Tween<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:238

to

to(properties, options?): Tween<T>
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<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:154

yoyo

yoyo(yoyo): Tween<T>
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<T>
this instance for object chaining
- Defined in src/tweens/tween.ts:270

Class Tween<T>

Type Parameters

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns Tween<T>

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

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

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