pixi-action
pixi-action is a plugin for Pixi.js to create actions and animations easily. API inspired by Cocos2d-x. Online demo here.
1. Install
npm install pixi-action
require
it, or import it with script
tag, all is OK.
2. Usage
Code just like below.
var renderer = 800600;documentbody;var stage = ; var sprite1 = resources'res/img/animal.png'texture; // here is the action define.// similar with cocos2d-x.var action_move = 500 400 2;// run the action with actionManager.var animation = PIXIactionManager;// listen the event, include: start, end.animation; { window; renderer; PIXIactionManager; // update actions};
Action defines are similar with cocos2d-x.
3. How it works
This plugin add a new namespace named action
to the PIXI namespace, and the action namespace has 2 new classes, ActionManager and Action, and create an instance for ActionManager in PIXI.actionManager, but all you need is add PIXI.actionManager.update()
in your requestAnimationFrame. You can pass as params for PIXI.actionManager.update(delta)
your own delta time, if you don't pass anything it will be calculated internally.
For max accuracy calculating the delta time you can use the AnimationLoop plugin.
When a action is started, or ended, it will fire events named start
/ end
.
4. Using AnimationLoop
var renderer = 800600;documentbody; var animationLoop = renderer; //Add a postrender or prerender event to add the timer.update in the raf.animationLoop; animationLoopstart;
5. Events
TimerManager extends from PIXI.utils.EventEmitter, and emit some events: start, end, repeat, update and stop. More info: Node.js Events
- start - callback(elapsedTime): Fired when the action starts.
- end - callback(elapsedTime): Fired when the action is ended.
6. Actions & Animations
Now pixi-action supported actions / animations below. You can just combine them for complex actions.
- ActionMove
PIXI.action.MoveTo(x, y, time); PIXI.action.MoveBy(x, y, time);
- ActionScale
PIXI.action.ScaleTo(x, y, time); PIXI.action.ScaleBy(x, y, time);
- ActionRotate
PIXI.action.RotateTo(rotation, time); PIXI.action.RotateBy(rotation, time);
- ActionBlink
PIXI.action.Blink(count, time);
- ActionFade
PIXI.action.FadeIn(time); PIXI.action.FadeOut(time);
- ActionSkew
PIXI.action.SkewTo(x, y, time); PIXI.action.SkewBy(x, y, time);
- ActionPivot
PIXI.action.PivotTo(x, y, time); PIXI.action.PivotBy(x, y, time);
- ActionTint
PIXI.action.TintTo(tint, time); PIXI.action.TintBy(tint, time);
- ActionAlpha
PIXI.action.AlphaTo(alpha, time); PIXI.action.AlphaBy(alpha, time);
- ActionSequence
PIXI.action.Sequence(actions);
- Spawn
PIXI.action.Spawn(actions);
- ActionRepeat
PIXI.action.Repeat(action, count);
- repeatForever
PIXI.action.Repeat(action);
- ActionDelay
PIXI.action.DelayTime(time);
- ActionCallFunc
PIXI.action.CallFunc(func);
7. API
- PIXI.actionManager.runAction(object, action): run action on an object, return an animation, can
on
the events. - PIXI.actionManager.cancelAction(AnimationObject): cancel the animation.
- new PIXI.action.*(args): create an action.
LICENSE
MIT@hustcc. Welcome to Submit Pull Request
.