🎬 PixiJS Actions - Powerful, lightweight animation plugin for PixiJS 6, 7, 8+

[reececomo]

🎬 PixiJS Actions

Powerful, lightweight animations in PixiJS.

^{Download: pixijs-actions (github)}

# npm
npm install pixijs-actions

# yarn
npm install pixijs-actions

---

👋 Hey PixiJSers. Check out our new pixijs-actions plugin. It comes with:

• 🚀 35+ built-in animations/triggers, 30+ smoothing modes
• 🔀 Reuseable, chainable (and reversible!) actions
• ⌚ Comprehensive speed and pausing support
• ✨ Supports PixiJS v6.3+, v7+, v8+

It's based on a hard fork of srpatel's awesome pixi-actions library, but switches to a mixins-based approach to give a more native-like support to actions and animation.

Sprite.run(Action)

The ES6 module extends Sprite and Container with native-like support (and types) using global mixins.

mySprite.run(Action.fadeOut(0.3));

This keeps PixiJS Actions idiomatic and simple. You can combine simple actions to create some advanced animations.

More examples

const razzleDazzle = Action.sequence([
  Action.unhide(),
  Action.fadeIn(0.3),
  Action.scaleTo(2, 0.3).easeIn(),
  Action.scaleTo(1, 0.3).easeOut(),
]);

// ✨ Show mySprite with some flair!
mySprite.run(razzleDazzle, () => {
  console.log("now that's showbiz");
});

Named actions

// Repeat an action forever!
mySprite.runWithKey(Action.repeatForever(Action.rotateBy(5, 1.0)), 'spinForever');

// Pause all sprite actions
mySprite.isPaused = true;

// Remove the action
mySprite.removeAction('spinForever');

Speed management

mySprite.run(Action.moveToX(100, 5.0));

// Play all actions in slow-motion
mySprite.speed = 0.5;

// Nodes actions are affected by their parent's speed too.
mySprite.parent.speed = 0.5;

Custom paths support

// Follow a path.

// A path can be an any array of { x, y } points (e.g.
// bezierjs curves), or any object with a `points` property
// that is an array of { x, y } points (e.g. ropes).
const somePath: PIXI.SimpleRope;

const followPath = Action.follow(somePath, 5.0).easeInOut();

mySprite.run(Action.repeatForever(
  Action.sequence([
    followPath,
    followPath.reversed().setSpeed(2.0)
  ])
));

Next steps

• Added follow(path,duration) and follow(path,atSpeed)
• Make the mixin manual.
• Fixed first-class v8 support.
• Maybe eventually it would be good to have optional support for the extended SKAudioNode and SKSpriteNode actions, but would need to be based on peer dependencies.

[reececomo]

Just a heads up compatibility may be patchy as we've only been rigging it to work with our ES6/Webpack config.

More than happy to update to expand support, just let me know.