Reference Source 
import {Tween} from 'tween'
public class | source

Tween

Class for creating a tweening animation

Static Method Summary

Static Public Methods
public static

easeInBack(t: *, b: *, c: *, d: *): *

public static

easeInBounce(t: *, b: *, c: *, d: *): *

public static

easeInCirc(t: *, b: *, c: *, d: *): *

public static

easeInCubic(t: *, b: *, c: *, d: *): *

public static

easeInElastic(t: *, b: *, c: *, d: *): *

public static

easeInExpo(t: *, b: *, c: *, d: *): *

public static

easeInOutBack(t: *, b: *, c: *, d: *): *

public static

easeInOutBounce(t: *, b: *, c: *, d: *): *

public static

easeInOutCirc(t: *, b: *, c: *, d: *): *

public static

easeInOutCubic(t: *, b: *, c: *, d: *): *

public static

easeInOutElastic(t: *, b: *, c: *, d: *): *

public static

easeInOutExpo(t: *, b: *, c: *, d: *): *

public static

easeInOutQuad(t: *, b: *, c: *, d: *): *

public static

easeInOutQuart(t: *, b: *, c: *, d: *): *

public static

easeInOutQuint(t: *, b: *, c: *, d: *): *

public static

easeInOutSine(t: *, b: *, c: *, d: *): *

public static

easeInQuad(t: *, b: *, c: *, d: *): *

public static

easeInQuart(t: *, b: *, c: *, d: *): *

public static

easeInQuint(t: *, b: *, c: *, d: *): *

public static

easeInSine(t: *, b: *, c: *, d: *): *

public static

easeOutBack(t: *, b: *, c: *, d: *): *

public static

easeOutBounce(t: *, b: *, c: *, d: *): *

public static

easeOutCirc(t: *, b: *, c: *, d: *): *

public static

easeOutCubic(t: *, b: *, c: *, d: *): *

public static

easeOutElastic(t: *, b: *, c: *, d: *): *

public static

easeOutExpo(t: *, b: *, c: *, d: *): *

public static

easeOutQuad(t: *, b: *, c: *, d: *): *

public static

easeOutQuart(t: *, b: *, c: *, d: *): *

public static

easeOutQuint(t: *, b: *, c: *, d: *): *

public static

easeOutSine(t: *, b: *, c: *, d: *): *

public static

linear(t: *, b: *, c: *, d: *): *

Static Private Methods
private static

_clamp(pNumber: number, pMin: number, pMax: number): number

private static

Converts an Hex color value to an array of [r, g, b].
private static

_rgbToHex(pColorArray: Array): *

Converts an array of [r, g, b] to an Hex color code.

Constructor Summary

Public Constructor
public

constructor(pOtions: Object)

Member Summary

Public Members
public

Update each frame.
public
public

easing: *

public
public

end: *

public

events: {}

public
public
public
public
public

start: *

public
public

update: *

public

version: *

The version of the module.

Method Summary

Public Methods
public

animate(pUpdate: function, pOscillate: boolean): Tween

Animates the tween by oscillating between the start and end properties.
public

build(pOtions: Object): *

public

on(pEvent: Object, pCallback: Function): Tween

Attaches a callback to the specified event.
public

Pauses the tween animation
public

Resumes the tween animation
public

stop()

Stops the tween and clears all data.
Private Methods
private

_build(pStart: Object, pEnd: Object, pDuration: number, pEasing: function)

Builds/Rebuilds the tween object with new info

Static Public Methods

public static easeInBack(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInBounce(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInCirc(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInCubic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInElastic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInExpo(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutBack(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutBounce(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutCirc(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutCubic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutElastic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutExpo(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutQuad(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutQuart(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutQuint(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInOutSine(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInQuad(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInQuart(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInQuint(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeInSine(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutBack(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutBounce(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutCirc(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutCubic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutElastic(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutExpo(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutQuad(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutQuart(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutQuint(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static easeOutSine(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

public static linear(t: *, b: *, c: *, d: *): * source

Params:

NameTypeAttributeDescription
t *
b *
c *
d *

Return:

*

Static Private Methods

private static _clamp(pNumber: number, pMin: number, pMax: number): number source

Params:

NameTypeAttributeDescription
pNumber number

The number to clamp
pMin number

The minimum number
pMax number

The maximum number

Return:

number

The number clamped between the minimum and maximum values

private static _hexToRgb(pHex: string): Array source

Converts an Hex color value to an array of [r, g, b].

Params:

NameTypeAttributeDescription
pHex string

The Hex color in the form "#fff" or "#ffffff" or tagless.

Return:

Array

The array [r, g, b].

private static _rgbToHex(pColorArray: Array): * source

Converts an array of [r, g, b] to an Hex color code.

Params:

NameTypeAttributeDescription
pColorArray Array

The rgb color array to convert into a hex return {string} The hex color

Return:

*

Public Constructors

public constructor(pOtions: Object) source

Params:

NameTypeAttributeDescription
pOtions Object
  • optional
  • default: {}

The options for the tween animation
pOtions.start Object
  • optional
  • default: {}

The starting properties of the animation
pOtions.end Object
  • optional
  • default: {}

The end properties of the animation
pOtions.duration number
  • optional
  • default: 1000

The duration of the animation in milliseconds
pOtions.easing string
  • optional
  • default: "linear"

The easing function to use for the animation

Public Members

public animationFrame: * source

Update each frame.

public duration: * source

public easing: * source

public elapsed: number source

public end: * source

public events: {} source

public exportedValues: {} source

public lastTime: number source

public oscillating: * source

public paused: boolean source

public start: * source

public tweening: boolean source

public update: * source

public version: * source

The version of the module.

Public Methods

public animate(pUpdate: function, pOscillate: boolean): Tween source

Animates the tween by oscillating between the start and end properties.

Params:

NameTypeAttributeDescription
pUpdate function

A callback function to update the values during the oscillation.
pOscillate boolean
  • optional
  • default: false

A flag to indicate if the tween should oscillate.

Return:

Tween

Returns the Tween instance for method chaining.

public build(pOtions: Object): * source

Params:

NameTypeAttributeDescription
pOtions Object
  • optional
  • default: {}

The options for the tween animation
pOtions.start Object
  • optional
  • default: {}

The starting properties of the animation
pOtions.end Object
  • optional
  • default: {}

The end properties of the animation
pOtions.duration number
  • optional
  • default: 1000

The duration of the animation in milliseconds
pOtions.easing string
  • optional
  • default: "linear"

The easing function to use for the animation

Return:

*

public on(pEvent: Object, pCallback: Function): Tween source

Attaches a callback to the specified event.

Params:

NameTypeAttributeDescription
pEvent Object

The event to attach the callback to
pCallback Function

The function to be called when the event is triggered

Return:

Tween

The Tween instance

public pause(): Tween source

Pauses the tween animation

Return:

Tween

The instance of the Tween object

public resume(): Tween source

Resumes the tween animation

Return:

Tween

The instance of the Tween object

public stop() source

Stops the tween and clears all data.

Private Methods

private _build(pStart: Object, pEnd: Object, pDuration: number, pEasing: function) source

Builds/Rebuilds the tween object with new info

Params:

NameTypeAttributeDescription
pStart Object

The start object containing the start values
pEnd Object

The end object containing the end values
pDuration number

The duration of the effect
pEasing function

The easing function to use