PixiJS Particle Emitter supports easing for most properties. Easing is a way to control the transition between two values over time.
For example, making a particle fade from an alpha value of one (fully visible) to an alpha of zero (fully transparent) over 1 second. Here’s some example math and particles.
And then there’s… A weird one. I’m sure there’s logic to it, but for me it’s just “play around and see what happens…” There’s an option to provide an array of objects which provide… Something over time. Best to play with it yourself, but the fourth example below uses this ease:
ease: [
{ "s": 0.5,"cp": 0.5,"e": 0.5 },
{ "s": 1,"cp": 1,"e": 1 },
{ "s": 0.5,"cp": 0.5,"e": 0.5 }
],
| time | n -> n | n -> √n | n -> abs(2n - 1 ) |
|---|---|---|---|
| 0 | 1 | 1 | 1 |
| 0.1 | 0.9 | 0.94 | 0.8 |
| 0.2 | 0.8 | 0.89 | 0.6 |
| 0.3 | 0.7 | 0.84 | 0.4 |
| 0.4 | 0.6 | 0.77 | 0.2 |
| 0.5 | 0.5 | 0.71 | 0 |
| 0.6 | 0.4 | 0.63 | 0.2 |
| 0.7 | 0.3 | 0.55 | 0.4 |
| 0.8 | 0.2 | 0.45 | 0.6 |
| 0.9 | 0.1 | 0.32 | 0.8 |
| 1.0 | 0 | 0 | 1 |