A lightweight tweener using Pixi's built in ticker.

Installation

npm install pixi-tweener

The library is exposed as an UMD module. If loaded directly with a <script> tag, it can be accessed under pixiTweener.Tweener and pixiTweener.Easing.

Usage

import { Tweener, Easing } from "pixi-tweener";

// ...

Tweener.init(app.ticker);

await Tweener.add({ target: bunnySprite, duration: 3, ease: Easing.easeInOutCubic }, { x: 100, alpha: 0.5});

Api

Tweener.init

Registers the tweener on a ticker. Dispose must be called before another init() call.

static init(ticker: Ticker): void;

Tweener.dispose

static dispose(): void;

Unregisters the tweener from the ticker.

Tweener.add

Adds a new tween to the tweener, returns a promise that fulfills when the tween completes. Tweens start automatically. For duration you can either use seconds, or total tick count. Default is seconds.

static add<T extends P, P extends TweenProps>(tweenParams: {
        target: T;
        context?: any;
        useTickForDuration?: boolean;
        duration: number;
        delay?: number;
        ease?: (t: number) => number;
        onUpdate?: (t: number) => void;
    }, props: P): Promise<void>;

Tweener.killTweensOf

Stop all tweens on the target context, optional parameter to skip fulfilling the promises. Context can be any object used in the creation of the tween, that can be shared by multiple tweens. By default it is the target of the tween.

static killTweensOf(context: any, skipComplete?: boolean) 

Tweener.tweening

Returns true if there are any active tweens.

static tweening(): boolean;