pixi-action — это плагин для Pixi.js, который позволяет легко создавать действия и анимации. API вдохновлён Cocos2d-x. Онлайн-демонстрация доступна по ссылке.

1. Установка

npm install pixi-action

Можно использовать require или импортировать с помощью тега script.

2. Использование Код выглядит следующим образом:

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. Как это работает Этот плагин добавляет новое пространство имён action в пространство имён PIXI и содержит два новых класса ActionManager и Action. Создаётся экземпляр ActionManager в PIXI.actionManager, но всё, что вам нужно сделать, это добавить PIXI.actionManager.update() в requestAnimationFrame. Вы можете передать в качестве параметров для PIXI.actionManager.update(delta) своё собственное время delta, если вы ничего не передаёте, оно будет рассчитано внутри.

Для максимальной точности расчёта времени delta можно использовать плагин AnimationLoop.

Когда действие начинается или заканчивается, оно запускает события start / end.

4. Использование 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. События TimerManager расширяет PIXI.utils.EventEmitter и генерирует некоторые события: start, end, repeat, update и stop. Подробнее см. Node.js Events.

• start - callback(elapsedTime): срабатывает при запуске действия.
• end - callback(elapsedTime): срабатывает, когда действие завершено.

6. Действия и анимации Теперь pixi-action поддерживает следующие действия / анимации. Их можно комбинировать для сложных действий.

• 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 ПИКСИ. экшн. дилэй(тайм);

7. API

• ПИКСИ. экшн мэнеджер. ран экшн(объект, экшн): запустить экшн на объекте, вернуть анимацию, можно «он» события.
• нью ПИКСИ. экшн.*(аргс): создать экшн.

LICENSE

MIT@hustcc. Добро пожаловать в «Отправить запрос на вытягивание».