pixi-tween
pixi-tween is a plugin for Pixi.js v4.1.0 or higher to create tween animations.
API documentation
Usage
Rollup / Browserify / Webpack
If you use Browserify or Webpack you can use pixi-tween like this:
;; const app = 800 600;documentbody; // Listen for animate update and update the tween managerappticker;
Prebuilt files
If not, the namespaces are automatically added to global anyway
const app = 800 600;documentbody; // Listen for animate update and update the tween managerappticker;
How it works
This plugin add a new namespace names tween
to the PIXI namespace, and this new namespace has 3 new classes Tween, TweenPath and TweenManager, also add an Easing object.
A tweenManager is automatically created for you in PIXI.tweenManager, which you need to update on ticks via PIXI.tweenManager.update()
.
You can create your own tweenManagers via new PIXI.tween.TweenManager
, and you can also manually update the timings of a manager via PIXI.tweenManager.update(deltaMS)
When a tween is ended, the instance will kept in the memory and in the tweenManager, but you can prevent this if you set .expire = true in the tween.
Events
Tween extends from PIXI.utils.EventEmitter, and emit some events: start, end, repeat, update, stop and pingpong. You can read about these in the api documentation under PIXI.tween.Tween.
Paths
Move an object along a path it's easy with TweenPath. TweenPath use a similar PIXI.Graphics API to create paths, and once it's created our path we just need to add it to a tween with .path = ourPathCreated.
If you need draw your path (useful to debug), PIXI.Graphics has been enhanced with a new method named .drawPath(path). Use it the same way like .drawRectanle, .drawShape, etc...
Basic example
const app = 800 600;documentbody; const sprite = PIXITextureWHITE;const tween = PIXItweenManager;tweentweentime = 1000;tweenrepeat = 10;tween;tween;tweenstart; // Listen for animate update and update the tween managerappticker;