@tweenjs/tween.js

@tweenjs/tween.js

Version 25.0.0
Published 1 year ago
224 kB
No dependencies
MIT license

Install

npm i @tweenjs/tween.js

yarn add @tweenjs/tween.js

pnpm add @tweenjs/tween.js

Overview

Simple and fast tweening engine with optimised Robert Penner's equations.

Variables

variable Easing

const Easing: Readonly<{
    Linear: Readonly<EasingFunctionGroup & { None: EasingFunction }>;
    Quadratic: Readonly<EasingFunctionGroup>;
    Cubic: Readonly<EasingFunctionGroup>;
    Quartic: Readonly<EasingFunctionGroup>;
    Quintic: Readonly<EasingFunctionGroup>;
    Sinusoidal: Readonly<EasingFunctionGroup>;
    Exponential: Readonly<EasingFunctionGroup>;
    Circular: Readonly<EasingFunctionGroup>;
    Elastic: Readonly<EasingFunctionGroup>;
    Back: Readonly<EasingFunctionGroup>;
    Bounce: Readonly<EasingFunctionGroup>;
    generatePow(power?: number): EasingFunctionGroup;
}>;

The Ease class provides a collection of easing functions for use with tween.js.

variable exports

const exports: {
    Easing: Readonly<{
        Linear: Readonly<EasingFunctionGroup & { None: EasingFunction }>;
        Quadratic: Readonly<EasingFunctionGroup>;
        Cubic: Readonly<EasingFunctionGroup>;
        Quartic: Readonly<EasingFunctionGroup>;
        Quintic: Readonly<EasingFunctionGroup>;
        Sinusoidal: Readonly<EasingFunctionGroup>;
        Exponential: Readonly<EasingFunctionGroup>;
        Circular: Readonly<EasingFunctionGroup>;
        Elastic: Readonly<EasingFunctionGroup>;
        Back: Readonly<EasingFunctionGroup>;
        Bounce: Readonly<EasingFunctionGroup>;
        generatePow(power?: number): EasingFunctionGroup;
    }>;
    Group: typeof Group;
    Interpolation: {
        Linear: (v: number[], k: number) => number;
        Bezier: (v: number[], k: number) => number;
        CatmullRom: (v: number[], k: number) => number;
        Utils: {
            Linear: (p0: number, p1: number, t: number) => number;
            Bernstein: (n: number, i: number) => number;
            Factorial: (n: number) => number;
            CatmullRom: (
                p0: number,
                p1: number,
                p2: number,
                p3: number,
                t: number
            ) => number;
        };
    };
    now: () => number;
    Sequence: typeof Sequence;
    nextId: typeof Sequence.nextId;
    Tween: typeof Tween;
    VERSION: string;
    getAll: () => Tween<any>[];
    removeAll: () => void;
    add: (...tweens: Tween<any>[]) => void;
    remove: (...tweens: Tween<any>[]) => void;
    update: {
        (time?: number | undefined): void;
        (time?: number | undefined, preserve?: boolean | undefined): void;
    };
};

variable Interpolation

const Interpolation: {
    Linear: (v: number[], k: number) => number;
    Bezier: (v: number[], k: number) => number;
    CatmullRom: (v: number[], k: number) => number;
    Utils: {
        Linear: (p0: number, p1: number, t: number) => number;
        Bernstein: (n: number, i: number) => number;
        Factorial: (n: number) => number;
        CatmullRom: (
            p0: number,
            p1: number,
            p2: number,
            p3: number,
            t: number
        ) => number;
    };
};

variable nextId

const nextId: () => number;

variable update

const update: {
    (time?: number | undefined): void;
    (time?: number | undefined, preserve?: boolean | undefined): void;
};

Deprecated

The global TWEEN Group will be removed in a following major release. To migrate, create a new Group() instead of using TWEEN as a group.

Old code:

import * as TWEEN from '@tweenjs/tween.js'

//...

const tween = new TWEEN.Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

requestAnimationFrame(function loop(time) {
  TWEEN.update(time)
  requestAnimationFrame(loop)
})

New code:

import {Tween, Group} from '@tweenjs/tween.js'

//...

const tween = new Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

const group = new Group()
group.add(tween)
group.add(tween2)

//...

requestAnimationFrame(function loop(time) {
  group.update(time)
  requestAnimationFrame(loop)
})

variable VERSION

const VERSION: string;

Functions

function add

add: (...tweens: Tween<any>[]) => void;

Deprecated

The global TWEEN Group will be removed in a following major release. To migrate, create a new Group() instead of using TWEEN as a group.

Old code:

import * as TWEEN from '@tweenjs/tween.js'

//...

const tween = new TWEEN.Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

requestAnimationFrame(function loop(time) {
  TWEEN.update(time)
  requestAnimationFrame(loop)
})

New code:

import {Tween, Group} from '@tweenjs/tween.js'

//...

const tween = new Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

const group = new Group()
group.add(tween)
group.add(tween2)

//...

requestAnimationFrame(function loop(time) {
  group.update(time)
  requestAnimationFrame(loop)
})

function getAll

getAll: () => Tween<any>[];

Deprecated

The global TWEEN Group will be removed in a following major release. To migrate, create a new Group() instead of using TWEEN as a group.

Old code:

import * as TWEEN from '@tweenjs/tween.js'

//...

const tween = new TWEEN.Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

requestAnimationFrame(function loop(time) {
  TWEEN.update(time)
  requestAnimationFrame(loop)
})

New code:

import {Tween, Group} from '@tweenjs/tween.js'

//...

const tween = new Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

const group = new Group()
group.add(tween)
group.add(tween2)

//...

requestAnimationFrame(function loop(time) {
  group.update(time)
  requestAnimationFrame(loop)
})

function now

now: () => number;

function remove

remove: (...tweens: Tween<any>[]) => void;

Deprecated

The global TWEEN Group will be removed in a following major release. To migrate, create a new Group() instead of using TWEEN as a group.

Old code:

import * as TWEEN from '@tweenjs/tween.js'

//...

const tween = new TWEEN.Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

requestAnimationFrame(function loop(time) {
  TWEEN.update(time)
  requestAnimationFrame(loop)
})

New code:

import {Tween, Group} from '@tweenjs/tween.js'

//...

const tween = new Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

const group = new Group()
group.add(tween)
group.add(tween2)

//...

requestAnimationFrame(function loop(time) {
  group.update(time)
  requestAnimationFrame(loop)
})

function removeAll

removeAll: () => void;

Deprecated

The global TWEEN Group will be removed in a following major release. To migrate, create a new Group() instead of using TWEEN as a group.

Old code:

import * as TWEEN from '@tweenjs/tween.js'

//...

const tween = new TWEEN.Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

requestAnimationFrame(function loop(time) {
  TWEEN.update(time)
  requestAnimationFrame(loop)
})

New code:

import {Tween, Group} from '@tweenjs/tween.js'

//...

const tween = new Tween(obj)
const tween2 = new TWEEN.Tween(obj2)

//...

const group = new Group()
group.add(tween)
group.add(tween2)

//...

requestAnimationFrame(function loop(time) {
  group.update(time)
  requestAnimationFrame(loop)
})

Classes

class Group

class Group {}

Controlling groups of tweens
Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components. In these cases, you may want to create your own smaller groups of tween

constructor

constructor(...tweens: Tween<any>[]);

method add

add: (...tweens: Tween[]) => void;

method allStopped

allStopped: () => boolean;

Return true if all tweens in the group are not paused or playing.

method getAll

getAll: () => Array<Tween>;

method remove

remove: (...tweens: Tween[]) => void;

method removeAll

removeAll: () => void;

method update

update: { (time?: number): void; (time?: number, preserve?: boolean): void };

Deprecated
The preserve parameter is now defaulted to true and will be removed in a future major release, at which point all tweens of a group will always be preserved when calling update. To migrate, always use group.add(tween) or group.remove(tween) to manually add or remove tweens, and do not rely on tweens being automatically added or removed.

class Sequence

class Sequence {}

Utils

method nextId

static nextId: () => number;

class Tween

class Tween<T extends UnknownProps = any> {}

Tween.js - Licensed under the MIT license https://github.com/tweenjs/tween.js ----------------------------------------------
See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors. Thank you all, you're awesome!

constructor

constructor(object: UnknownProps, group?: Group);

Parameter object
The object whose properties this Tween will animate.
Parameter group
The object whose properties this Tween will animate.

constructor

constructor(object: UnknownProps, group: boolean);

Deprecated
The group parameter is now deprecated, instead use `new Tween(object) then group.add(tween)` to add a tween to a group. Use new Tween(object, true) to restore the old behavior for now, but this will be removed in the future.

property autoStartOnUpdate

static autoStartOnUpdate: boolean;

method chain

chain: (...tweens: Array<Tween<any>>) => this;

method delay

delay: (amount?: number) => this;

method duration

duration: (duration?: number) => this;

method dynamic

dynamic: (dynamic?: boolean) => this;

method easing

easing: (easingFunction?: EasingFunction) => this;

method end

end: () => this;

method getDuration

getDuration: () => number;

method getId

getId: () => number;

method group

group: { (group: Group): this; (): this };

Removes the tween from the current group it is in, if any, then adds the tween to the specified group.
Deprecated
The argless call signature has been removed. Use tween.group(group) or group.add(tween), instead.

method interpolation

interpolation: (interpolationFunction?: InterpolationFunction) => this;

method isPaused

isPaused: () => boolean;

method isPlaying

isPlaying: () => boolean;

method onComplete

onComplete: (callback?: (object: T) => void) => this;

method onEveryStart

onEveryStart: (callback?: (object: T) => void) => this;

method onRepeat

onRepeat: (callback?: (object: T) => void) => this;

method onStart

onStart: (callback?: (object: T) => void) => this;

method onStop

onStop: (callback?: (object: T) => void) => this;

method onUpdate

onUpdate: (callback?: (object: T, elapsed: number) => void) => this;

method pause

pause: (time?: number) => this;

method remove

remove: () => this;

Removes the tween from whichever group it is in.

method repeat

repeat: (times?: number) => this;

method repeatDelay

repeatDelay: (amount?: number) => this;

method resume

resume: (time?: number) => this;

method start

start: (time?: number, overrideStartingValues?: boolean) => this;

method startFromCurrentValues

startFromCurrentValues: (time?: number) => this;

method stop

stop: () => this;

method stopChainedTweens

stopChainedTweens: () => this;

method to

to: (target: UnknownProps, duration?: number) => this;

method update

update: (time?: number, autoStart?: boolean) => boolean;

Parameter autoStart
When true, calling update will implicitly call start() as well. Note, if you stop() or end() the tween, but are still calling update(), it will start again!
Returns
true if the tween is still playing after the update, false otherwise (calling update on a paused tween still returns true because it is still playing, just paused).

method yoyo

yoyo: (yoyo?: boolean) => this;

Package Files (1)

dist/tween.d.ts

Dependencies (0)

No dependencies.

Dev Dependencies (7)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@tweenjs/tween.js.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@tweenjs/tween.js)

HTML

<a href="https://www.jsdocs.io/package/@tweenjs/tween.js"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 2193 ms.
Missing or incorrect documentation? Open an issue for this package.

@tweenjs/tween.js

Install

Overview

Index

Variables

Functions

Classes

Variables

variable Easing

variable exports

variable Interpolation

variable nextId

variable update

Deprecated

variable VERSION

Functions

function add

Deprecated

function getAll

Deprecated

function now

function remove

Deprecated

function removeAll

Deprecated

Classes

class Group

constructor

method add

method allStopped

method getAll

method remove

method removeAll

method update

Deprecated

class Sequence

method nextId

class Tween

constructor

Parameter object

Parameter group

constructor

Deprecated

property autoStartOnUpdate

method chain

method delay

method duration

method dynamic

method easing

method end

method getDuration

method getId

method group

Deprecated

method interpolation

method isPaused

method isPlaying

method onComplete

method onEveryStart

method onRepeat

method onStart

method onStop

method onUpdate

method pause

method remove

method repeat

method repeatDelay

method resume

method start

method startFromCurrentValues

method stop

method stopChainedTweens

method to

method update

Parameter autoStart

Returns

method yoyo

Package Files (1)

Dependencies (0)

Dev Dependencies (7)