pixi-action：类似 cocos2d-x 使用方法的 Pixi.js 动画插件
pixi-action
pixi-actionis a plugin forPixi.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 = 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 theAnimationLoop plugin.
When a action is started, or ended, it will fire events named start
/ end
.
4. Using AnimationLoop
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();
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(scale_x, scale_y, time); PIXI.action.ScaleBy(scale_x, scale_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);
- ActionJump
PIXI.action.JumpTo(x, y, time); PIXI.action.JumpBy(x, y, time);
- ActionTint
PIXI.action.TintTo(tint, time); PIXI.action.TintBy(tint, time);
- ActionSequence
PIXI.action.Sequence(actions);
- ActionRepeat
PIXI.action.Repeat(action, count);
- repeatForever
PIXI.action.Repeat(action);
- ActionDelay
PIXI.action.Delay(time);
7. API
-
PIXI.actionManager.runAction(object, action)
: run action on an object, return an animation, can
onthe events. - new PIXI.action.*(args) : create an action.
LICENSE
MIT@ hustcc
. Welcome to
Submit Pull Request
.
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
