Class Tween

Class for creating a tweening animation Tween

License

Tween does not have a license at this time. For licensing contact the author

Author

https://github.com/doubleactii

Constructors

constructor

new Tween(options?): Tween
Parameters
- options: TweenOptions = {}
  The options for the tween animation
Returns Tween
- Defined in tween.ts:43

Properties

version

version: string = "VERSION_REPLACE_ME"

The version of the module.

start

start: Record<string, any> = {}

end

end: Record<string, any> = {}

duration

duration: number = 1000

easing

easing: EasingFunction = Tween.linear

events

events: Partial<Record<EventType, EventCallback>> = {}

exportedValues

exportedValues: Record<string, any> = {}

tweening

tweening: boolean = false

update

update: null | ((values) => void) = null

Type declaration

- (values): void
- Parameters
  - values: Record<string, any>
  Returns void

paused

paused: boolean = false

lastTime

lastTime: number = 0

elapsed

elapsed: number = 0

oscillating

oscillating: boolean = false

Methods

`Static` linear

linear(t, b, c, d): number
Linear easing function - constant speed
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:55

`Static` easeInQuad

easeInQuad(t, b, c, d): number
Quadratic ease-in function - slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:67

`Static` easeOutQuad

easeOutQuad(t, b, c, d): number
Quadratic ease-out function - slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:79

`Static` easeInOutQuad

easeInOutQuad(t, b, c, d): number
Quadratic ease-in-out function - slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:91

`Static` easeInSine

easeInSine(t, b, c, d): number
Sine ease-in function - very slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:104

`Static` easeOutSine

easeOutSine(t, b, c, d): number
Sine ease-out function - very slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:116

`Static` easeInOutSine

easeInOutSine(t, b, c, d): number
Sine ease-in-out function - very slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:128

`Static` easeInExpo

easeInExpo(t, b, c, d): number
Exponential ease-in function - very slow start, fast end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:140

`Static` easeOutExpo

easeOutExpo(t, b, c, d): number
Exponential ease-out function - fast start, very slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:152

`Static` easeInOutExpo

easeInOutExpo(t, b, c, d): number
Exponential ease-in-out function - very slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:164

`Static` easeInCirc

easeInCirc(t, b, c, d): number
Circular ease-in function - slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:179

`Static` easeOutCirc

easeOutCirc(t, b, c, d): number
Circular ease-out function - slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:191

`Static` easeInOutCirc

easeInOutCirc(t, b, c, d): number
Circular ease-in-out function - slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:203

`Static` easeInCubic

easeInCubic(t, b, c, d): number
Cubic ease-in function - slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:216

`Static` easeOutCubic

easeOutCubic(t, b, c, d): number
Cubic ease-out function - slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:228

`Static` easeInOutCubic

easeInOutCubic(t, b, c, d): number
Cubic ease-in-out function - slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:240

`Static` easeInQuart

easeInQuart(t, b, c, d): number
Quartic ease-in function - slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:253

`Static` easeOutQuart

easeOutQuart(t, b, c, d): number
Quartic ease-out function - slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:265

`Static` easeInOutQuart

easeInOutQuart(t, b, c, d): number
Quartic ease-in-out function - slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:277

`Static` easeInQuint

easeInQuint(t, b, c, d): number
Quintic ease-in function - slow start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:290

`Static` easeOutQuint

easeOutQuint(t, b, c, d): number
Quintic ease-out function - slow end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:302

`Static` easeInOutQuint

easeInOutQuint(t, b, c, d): number
Quintic ease-in-out function - slow start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:314

`Static` easeInElastic

easeInElastic(t, b, c, d): number
Elastic ease-in function - oscillating start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:327

`Static` easeOutElastic

easeOutElastic(t, b, c, d): number
Elastic ease-out function - oscillating end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:356

`Static` easeInOutElastic

easeInOutElastic(t, b, c, d): number
Elastic ease-in-out function - oscillating start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:385

`Static` easeInBack

easeInBack(t, b, c, d): number
Back ease-in function - overshoots at start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:415

`Static` easeOutBack

easeOutBack(t, b, c, d): number
Back ease-out function - overshoots at end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:428

`Static` easeInOutBack

easeInOutBack(t, b, c, d): number
Back ease-in-out function - overshoots at start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:441

`Static` easeInBounce

easeInBounce(t, b, c, d): number
Bounce ease-in function - bounces at start
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:455

`Static` easeOutBounce

easeOutBounce(t, b, c, d): number
Bounce ease-out function - bounces at end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:467

`Static` easeInOutBounce

easeInOutBounce(t, b, c, d): number
Bounce ease-in-out function - bounces at start and end
Parameters
- t: number
  Current time
- b: number
  Starting value
- c: number
  Change in value
- d: number
  Duration
Returns number
The eased value
- Defined in tween.ts:495

`Static` _clamp

_clamp(pNumber, pMin?, pMax?): number
Parameters
- pNumber: number
  The number to clamp
- pMin: number = 0
  The minimum number
- pMax: number = 1
  The maximum number
Returns number
The number clamped between the minimum and maximum values
- Defined in tween.ts:507

`Static` _hexToRgb

_hexToRgb(pHex): number[]
Converts an Hex color value to an array of [r, g, b].
Parameters
- pHex: string
  The Hex color in the form "#fff" or "#ffffff" or tagless.
Returns number[]
The array [r, g, b].
- Defined in tween.ts:516

`Static` _rgbToHex

_rgbToHex(pColorArray): string
Converts an array of [r, g, b] to an Hex color code.
Parameters
- pColorArray: number[]
  The rgb color array to convert into a hex
Returns string
The hex color
- Defined in tween.ts:534

build

build(options?): this
Parameters
- options: TweenOptions = {}
  The options for the tween animation
Returns this
- Defined in tween.ts:571

on

on(pEvent, pCallback): this
Attaches a callback to the specified event.
Parameters
- pEvent: EventType
  The event to attach the callback to
- pCallback: EventCallback
  The function to be called when the event is triggered
Returns this
The Tween instance
- Defined in tween.ts:581

animationFrame

animationFrame(): void
Update each frame.

Returns void
- Defined in tween.ts:601

animate

animate(pUpdate, pOscillate?): this
Animates the tween by oscillating between the start and end properties.
Parameters
- pUpdate: ((values) => void)
  A callback function to update the values during the oscillation.
  - - (values): void
    - Parameters
      values: Record<string, any>
      Returns void
- pOscillate: boolean = false
  A flag to indicate if the tween should oscillate.
Returns this
Returns the Tween instance for method chaining.
- Defined in tween.ts:653

resume

resume(): this
Resumes the tween animation

Returns this
The instance of the Tween object
- Defined in tween.ts:687

pause

pause(): this
Pauses the tween animation

Returns this
The instance of the Tween object
- Defined in tween.ts:702

stop

stop(): void
Stops the tween and clears all data.

Returns void
- Defined in tween.ts:714

Class Tween

License

Author

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Tween

Properties

version

start

end

duration

easing

events

exportedValues

tweening

update

Type declaration

Parameters

Returns void

paused

lastTime

elapsed

oscillating

Methods

Static linear

Parameters

Returns number

Static easeInQuad

Parameters

Returns number

Static easeOutQuad

Parameters

Returns number

Static easeInOutQuad

Parameters

Returns number

Static easeInSine

Parameters

Returns number

Static easeOutSine

Parameters

Returns number

Static easeInOutSine

Parameters

Returns number

Static easeInExpo

Parameters

Returns number

Static easeOutExpo

Parameters

Returns number

Static easeInOutExpo

Parameters

Returns number

Static easeInCirc

Parameters

Returns number

Static easeOutCirc

Parameters

Returns number

Static easeInOutCirc

Parameters

Returns number

Static easeInCubic

Parameters

Returns number

Static easeOutCubic

Parameters

Returns number

Static easeInOutCubic

Parameters

Returns number

Static easeInQuart

Parameters

Returns number

`Static` linear

`Static` easeInQuad

`Static` easeOutQuad

`Static` easeInOutQuad

`Static` easeInSine

`Static` easeOutSine

`Static` easeInOutSine

`Static` easeInExpo

`Static` easeOutExpo

`Static` easeInOutExpo

`Static` easeInCirc

`Static` easeOutCirc

`Static` easeInOutCirc

`Static` easeInCubic

`Static` easeOutCubic

`Static` easeInOutCubic

`Static` easeInQuart

`Static` easeOutQuart

`Static` easeInOutQuart

`Static` easeInQuint

`Static` easeOutQuint

`Static` easeInOutQuint

`Static` easeInElastic

`Static` easeOutElastic

`Static` easeInOutElastic

`Static` easeInBack

`Static` easeOutBack

`Static` easeInOutBack

`Static` easeInBounce

`Static` easeOutBounce

`Static` easeInOutBounce

`Static` _clamp

`Static` _hexToRgb

`Static` _rgbToHex