Repository files navigation

pixi-action is a plugin forPixi.js to create actions and animations easily. API inspired byCocos2d-x. Online demohere.

npm install pixi-action

require it, or import it withscript tag, all is OK.

Code just like below.

varrenderer=newPIXI.autoDetectRenderer(800,600);document.body.appendChild(renderer.view);varstage=newPIXI.Container();varcat=newSprite(resources['res/img/animal.png'].texture);// here is the action define.// similar with cocos2d-x.varaction_move=newPIXI.action.MoveTo(500,400,2);// run the action with actionManager.varanimation=PIXI.actionManager.runAction(cat,action_move);// listen the event, include: start, end.animation.on('end',function(elapsed){console.log('action end.');});functionanimate(){window.requestAnimationFrame(animate);renderer.render(stage);PIXI.actionManager.update();// update actions}animate();

Action defines are similar with cocos2d-x.

This plugin add a new namespace namedaction to the PIXI namespace, and the action namespace has 2 new classes,ActionManager andAction, and create an instance for ActionManager in PIXI.actionManager, but all you need is addPIXI.actionManager.update() in your requestAnimationFrame. You can pass as params forPIXI.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 theAnimationLoop plugin.

When a action is started, or ended, it will fire events namedstart /end.

varrenderer=newPIXI.autoDetectRenderer(800,600);document.body.appendChild(renderer.view);varanimationLoop=newPIXI.AnimationLoop(renderer);//Add a postrender or prerender event to add the timer.update in the raf.animationLoop.on('postrender',function(){PIXI.actionManager.update(this.delta);//Pass as param the delta time to PIXI.timerManager.update});animationLoop.start();

TimerManager extends fromPIXI.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.

Nowpixi-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);

• PIXI.actionManager.runAction(object, action): run action on an object, return an animation, canon the events.
• PIXI.actionManager.cancelAction(AnimationObject): cancel the animation.
• new PIXI.action.*(args): create an action.

MIT@hustcc. Welcome toSubmit Pull Request.