101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import * as PIXI from 'pixi.js';
|
|
|
|
class Animateable {
|
|
public finished: boolean = false;
|
|
protected calledBack: boolean = false;
|
|
public callbackFn: Function;
|
|
|
|
public Finish() {
|
|
this.finished = true;
|
|
}
|
|
|
|
public update(ms) {
|
|
if (this.finished) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
export class FadeInOut extends Animateable {
|
|
public fadeType: 'in' | 'out';
|
|
public fadeTime: number;
|
|
public pixiObject: PIXI.Container;
|
|
private ticks: number = 0;
|
|
|
|
constructor(type: 'in' | 'out', timeInFrames: number, object: PIXI.Container, callbackFn: Function) {
|
|
super();
|
|
this.fadeType = type;
|
|
this.fadeTime = timeInFrames;
|
|
this.pixiObject = object;
|
|
this.callbackFn = callbackFn;
|
|
if (type == 'in') {
|
|
this.pixiObject.alpha = 0;
|
|
} else {
|
|
this.pixiObject.alpha = 1;
|
|
}
|
|
}
|
|
|
|
public update(ms) {
|
|
super.update(ms);
|
|
if (this.pixiObject == null) return this.Finish();
|
|
this.ticks++;
|
|
if (this.fadeType == 'in') {
|
|
this.pixiObject.alpha = this.ticks / this.fadeTime;
|
|
} else {
|
|
this.pixiObject.alpha -= 1 / this.fadeTime;
|
|
}
|
|
if (this.ticks >= this.fadeTime) this.Finish();
|
|
}
|
|
}
|
|
|
|
export class Tween extends Animateable {
|
|
public tweenTime: number;
|
|
public pixiObject: PIXI.Container;
|
|
private goalX: number;
|
|
private goalY: number;
|
|
private ticks: number = 0;
|
|
|
|
constructor(timeInFrames: number, object: PIXI.Container, goalX, goalY, callbackFn: Function) {
|
|
super();
|
|
this.tweenTime = timeInFrames;
|
|
this.pixiObject = object;
|
|
this.callbackFn = callbackFn;
|
|
this.goalX = goalX;
|
|
this.goalY = goalY;
|
|
}
|
|
|
|
public update(deltaMS) {
|
|
super.update(deltaMS);
|
|
this.ticks += deltaMS;
|
|
const progress = this.ticks / (this.tweenTime * 16.67);
|
|
|
|
this.pixiObject.x = (this.goalX - this.pixiObject.x) * progress + this.pixiObject.x;
|
|
this.pixiObject.y = (this.goalY - this.pixiObject.y) * progress + this.pixiObject.y;
|
|
|
|
if (this.ticks >= this.tweenTime * 16.67) {
|
|
this.pixiObject.x = this.goalX;
|
|
this.pixiObject.y = this.goalY;
|
|
this.Finish();
|
|
}
|
|
}
|
|
}
|
|
|
|
export class AnimationManager {
|
|
public AnimationQueue: Animateable[] = [];
|
|
public Animate(animatable: Animateable) {
|
|
this.AnimationQueue.push(animatable);
|
|
}
|
|
public update(ms) {
|
|
// Explanation: we go from the back of the array so that we can remove items freely without messing with
|
|
// foreach. From experience it gets a little screwy if you do this.AnimationQueue.forEach and doesn't properly
|
|
// remove elements.
|
|
for (let i = this.AnimationQueue.length - 1; i >= 0; i--) {
|
|
const anim = this.AnimationQueue[i];
|
|
if (anim.finished) {
|
|
anim.callbackFn();
|
|
this.AnimationQueue.splice(i, 1);
|
|
} else anim.update(ms);
|
|
}
|
|
}
|
|
}
|