pixi-ease
a simple and powerful pixi.js easing/tweening/animating library
features
- ease any pixi.js parameter, including tint (using a blend function or stepped)
- use any Penner function by name or any user-defined function
- support for generic number parameters
- change scale or skew using one parameter (e.g., scale: 5 changes both scale.x and scale.y)
- set default durations and easing function for all eases
- uses eventemitter3 for events for both the easing lists and individual eases
- tracks eases on DisplayObject and cleans up when DisplayObject is destroyed
- includes a default easing list so you don't have to instantiate for simple cases
- includes a shake parameter
- good test coverage
Live Demo
https://davidfig.github.io/pixi-ease/
Migrating to v3
- changed default update loop to use requestAnimationFrame to remove the dependency on pixi.js
- to use PIXI.Ticker (like in v2), pass
new Ease({ ticker: PIXI.Ticker.shared })
- ordinary usage should be unchanged
Installation
yarn add pixi-ease
or grab the latest release and use it:
<!-- or <script type="module" src="/directory-to-file/pixi-ease.es.js"></script> -->
API Documentation
https://davidfig.github.io/pixi-ease/jsdoc/
Simple Usage
const app = const test = appstagetesttint = 0x00ff00 const example = easeexampleexample testgeneric = 25const generic = easegeneric const secondEase = duration: 3000 wait: 1500 ease: 'easeInBack' repeat: 3 const test2 = appstagesecondEase
Build Examples
I've included a bunch of build examples in the builds directory, including: browserify, rollup, standalone (e.g., cdn), standalone (pixi.js v4), and typescript.
Tests
- Clone repository
- yarn install
- yarn test (for Mocha test code)
- yarn coverage (for Instanbul coverage)
To run demo locally:
- Clone repository
- yarn install
- yarn build
- yarn dev
- open browser to http://localhost:10001
To run build examples:
- Clone repository
- yarn install
- yarn build
- yarn builds
- yarn test-builds
- open browser to http://localhost:5000
Other Libraries
If you liked pixi-ease, please try my other open source libraries:
- pixi-viewport - A highly configurable viewport/2D camera designed to work with pixi.js.
- pixi-scrollbox - pixi.js scrollbox: a masked box that can scroll vertically or horizontally with scrollbars (uses pixi-ease)
- intersects - a simple collection of 2d collision/intersects functions. Supports points, circles, lines, axis-aligned boxes, and polygons
License
MIT License (c) 2019 YOPEY YOPEY LLC by David Figatner