https://github.com/davidfig/pixi-ease
pixi.js animation library using easing functions
https://github.com/davidfig/pixi-ease
animate ease easing pixi
Last synced: 3 months ago
JSON representation
pixi.js animation library using easing functions
- Host: GitHub
- URL: https://github.com/davidfig/pixi-ease
- Owner: davidfig
- License: mit
- Created: 2017-09-12T04:01:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T10:27:14.000Z (almost 3 years ago)
- Last Synced: 2025-02-02T03:54:09.681Z (3 months ago)
- Topics: animate, ease, easing, pixi
- Language: JavaScript
- Homepage:
- Size: 12.3 MB
- Stars: 100
- Watchers: 3
- Forks: 11
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/](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](https://github.com/davidfig/pixi-ease/releases/) and use it:
```html
const ease = new Ease.Ease(options)
Ease.add(...)
// or Ease.ease.add(...)
```
## API Documentation
[https://davidfig.github.io/pixi-ease/jsdoc/](https://davidfig.github.io/pixi-ease/jsdoc)
## Simple Usage
```js
import * as PIXI from 'pixi.js'
import { Ease, ease } from 'pixi-ease'
const app = new PIXI.Application()
const test = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
test.tint = 0x00ff00
const example = ease.add(test, { x: 20, y: 15, alpha: 0.25, rotation: 20, scale: 5, skewX: 0.25, blend: 0xff0000 } }, { reverse: true, duration: 2500, ease: 'easeInOutQuad' })
example.on('each', () => console.log('ease updated object during frame using PIXI.Ticker.'))
example.once('complete', () => console.log('move ease complete.'))
test.generic = 25
const generic = ease.add(test, { generic: 0 }, { duration: 1500, ease: 'easeOutQuad' })
generic.on('each', () => console.log(test.generic))
const secondEase = new Ease({ duration: 3000, wait: 1500, ease: 'easeInBack', repeat: 3 })
const test2 = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
secondEase.add(test2, { tint: [0xff0000, 0x00ff00, 0x000ff], scaleX: 2 })
```
## Build Examples
I've included a bunch of build examples in the builds directory, including: [browserify](https://github.com/davidfig/pixi-ease/tree/master/builds/browserify), [rollup](https://github.com/davidfig/pixi-ease/tree/master/builds/rollup), [standalone (e.g., cdn)](https://github.com/davidfig/pixi-ease/tree/master/builds/standalone), [standalone (pixi.js v4)](https://github.com/davidfig/pixi-ease/tree/master/builds/standalone-v4), and [typescript](https://github.com/davidfig/pixi-ease/tree/master/builds/typescript).
## Tests
1. Clone repository
2. yarn install
3. yarn test (for Mocha test code)
4. yarn coverage (for Instanbul coverage)
### To run demo locally:
1. Clone repository
2. yarn install
3. yarn build
4. yarn dev
5. open browser to http://localhost:10001
### To run build examples:
1. Clone repository
2. yarn install
3. yarn build
4. yarn builds
5. yarn test-builds
6. open browser to http://localhost:5000
## Other Libraries
If you liked pixi-ease, please try my other open source libraries:
* [pixi-viewport](https://github.com/davidfig/pixi-viewport) - A highly configurable viewport/2D camera designed to work with pixi.js.
* [pixi-scrollbox](https://github.com/davidfig/pixi-scrollbox) - pixi.js scrollbox: a masked box that can scroll vertically or horizontally with scrollbars (uses pixi-ease)
* [intersects](https://github.com/davidfig/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](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)