pixi-action is a plugin for Pixi.js to create actions and animations easily. API inspired by Cocos2d-x. Online demo here.
npm install pixi-action
require
it, or import it with script
tag, all is OK.
Code just like below.
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var sprite1 = new Sprite(resources['res/img/animal.png'].texture);
var action_move = PIXI.action.MoveTo(500, 400, 2);
var animation = PIXI.actionManager.runAction(cat, action_moveto);
animation.on('end', function(elapsed) {
console.log('action end.');
});
function animate() {
window.requestAnimationFrame(animate);
renderer.render(stage);
PIXI.actionManager.update(); // update actions
}
animate();
## 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
.
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var animationLoop = new PIXI.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 from PIXI.utils.EventEmitter, and emit some events: start, end, repeat, update and stop. More info: Node.js Events
Now pixi-action supported actions / animations below. You can just combine them for complex actions.
PIXI.action.MoveTo(x, y, time); PIXI.action.MoveBy(x, y, time);
PIXI.action.ScaleTo(scale_x, scale_y, time); PIXI.action.ScaleBy(scale_x, scale_y, time);
PIXI.action.RotateTo(rotation, time); PIXI.action.RotateBy(rotation, time);
PIXI.action.Blink(count, time);
PIXI.action.FadeIn(time); PIXI.action.FadeOut(time);
PIXI.action.SkewTo(x, y, time); PIXI.action.SkewBy(x, y, time);
PIXI.action.PivotTo(x, y, time); PIXI.action.PivotBy(x, y, time);
PIXI.action.JumpTo(x, y, time); PIXI.action.JumpBy(x, y, time);
PIXI.action.TintTo(tint, time); PIXI.action.TintBy(tint, time);
PIXI.action.Sequence(actions);
PIXI.action.Repeat(action, count);
PIXI.action.Repeat(action);
PIXI.action.Delay(time);
on
the events.MIT@hustcc. Welcome to Submit Pull Request
.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。