2 Star 0 Fork 0

小为 / pixi-action

加入 Gitee
与超过 1000 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

pixi-action

pixi-action is a plugin for Pixi.js to create actions and animations easily. API inspired by Cocos2d-x. Online demo here.

Build Status npm npm npm

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 the AnimationLoop 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 on the events.
  • new PIXI.action.*(args): create an action.

LICENSE

MIT@hustcc. Welcome to Submit Pull Request.

简介

:horse_racing: pixi-action is a plugin for Pixi.js to create actions and animations easily, inspired by Cocos2d-x. 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

pixi-action

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/hustcc/pixi-action.git
git@gitee.com:hustcc/pixi-action.git
hustcc
pixi-action
pixi-action
master

搜索帮助