pixi.js animation library using easing functions
a simple and powerful pixi.js easing/tweening/animating library
https://davidfig.github.io/pixi-ease/
new Ease({ ticker: PIXI.Ticker.shared })
yarn add pixi-ease
or grab the latest release and use it:
<script src="/directory-to-file/pixi.js"></script>
<script src="/directory-to-file/pixi-ease.js"></script>
<!-- or <script type="module" src="/directory-to-file/pixi-ease.es.js"></script> -->
<script>
const ease = new Ease.Ease(options)
Ease.add(...)
// or Ease.ease.add(...)
</script>
https://davidfig.github.io/pixi-ease/jsdoc/
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 })
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.
If you liked pixi-ease, please try my other open source libraries:
MIT License (c) 2019 YOPEY YOPEY LLC by David Figatner