AnimationTool/app/frame_handler.ts

116 lines
3.4 KiB
TypeScript
Raw Normal View History

2019-09-27 00:45:28 +00:00
import { IAnimationData } from './Interfaces/IAnimationData';
2019-09-27 23:45:52 +00:00
import { ICanvasData } from './Interfaces/ICanvasData';
2019-09-27 00:45:28 +00:00
2019-09-25 03:16:07 +00:00
export class FrameHandler {
2019-09-27 00:45:28 +00:00
private start: number = 0;
2019-09-26 01:59:16 +00:00
private frameNumberDiv: HTMLElement;
2019-09-27 23:45:52 +00:00
2019-09-27 00:45:28 +00:00
private animationData: IAnimationData;
2019-09-27 23:45:52 +00:00
private canvasData: ICanvasData;
2019-09-26 01:59:16 +00:00
2019-09-25 03:16:07 +00:00
private filenames: string[] = [];
private currentFrame: number = 0;
2019-09-26 23:28:35 +00:00
private playingAnimation: boolean;
2019-09-25 03:16:07 +00:00
2019-09-27 23:45:52 +00:00
private htmlCanvasElement: HTMLCanvasElement;
2019-09-27 02:02:46 +00:00
private canvasContext: CanvasRenderingContext2D;
private imageElement: HTMLImageElement;
constructor(
animationData: IAnimationData,
2019-09-27 23:45:52 +00:00
canvasData: ICanvasData,
htmlCanvasElement: HTMLCanvasElement,
2019-09-27 02:02:46 +00:00
canvasContext: CanvasRenderingContext2D,
2019-09-27 23:45:52 +00:00
frameNumberDiv: HTMLElement,
imageElement: HTMLImageElement
2019-09-27 02:02:46 +00:00
) {
2019-09-27 00:45:28 +00:00
this.animationData = animationData;
2019-09-27 23:45:52 +00:00
this.canvasData = canvasData;
this.htmlCanvasElement = htmlCanvasElement;
2019-09-27 02:02:46 +00:00
this.canvasContext = canvasContext;
2019-09-26 01:59:16 +00:00
this.frameNumberDiv = frameNumberDiv;
2019-09-27 00:45:28 +00:00
window.requestAnimationFrame(this.windowAnimationUpdate);
2019-09-27 23:45:52 +00:00
this.imageElement = imageElement;
2019-09-27 02:02:46 +00:00
this.canvasContext.imageSmoothingEnabled = false;
2019-09-26 01:59:16 +00:00
}
public GetCurrentFrame(): number {
return this.currentFrame;
2019-09-25 03:16:07 +00:00
}
public loadFrames(filenames: string[]) {
this.filenames = filenames;
this.currentFrame = 0;
2019-09-27 02:02:46 +00:00
this.RefreshImage();
2019-09-25 03:16:07 +00:00
}
public AdvanceFrames(amount: number) {
this.currentFrame += amount;
this.currentFrame %= this.filenames.length;
if (this.currentFrame < 0) {
this.currentFrame = this.filenames.length - 1;
}
this.GoToFrame(this.currentFrame);
}
public GoToFrame(frame: number) {
this.currentFrame = frame;
2019-09-27 02:02:46 +00:00
this.RefreshImage();
2019-09-26 01:59:16 +00:00
}
2019-09-27 00:45:28 +00:00
public TogglePlayingAnimation() {
this.playingAnimation = !this.playingAnimation;
console.log('playingAnimation = ', this.playingAnimation);
}
public StopPlayingAnimation() {
this.playingAnimation = false;
}
2019-09-27 02:02:46 +00:00
private RefreshImage() {
2019-09-26 01:59:16 +00:00
if (this.filenames.length === 0) {
this.frameNumberDiv.className = 'warning';
this.frameNumberDiv.innerText = 'No images uploaded yet';
2019-09-26 01:59:16 +00:00
} else {
2019-09-27 23:45:52 +00:00
this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
2019-09-27 02:02:46 +00:00
this.imageElement.src = this.filenames[this.currentFrame];
2019-09-27 23:45:52 +00:00
// draw sprite
this.canvasContext.drawImage(
this.imageElement,
0,
0,
this.htmlCanvasElement.width,
this.htmlCanvasElement.height
);
// draw origin +
const originCursorSize: number = 500;
const originX = this.animationData.originX * this.canvasData.widthRatio;
const originY = this.animationData.originY * this.canvasData.heightRatio;
this.canvasContext.beginPath();
this.canvasContext.moveTo(originX, originY - originCursorSize);
this.canvasContext.lineTo(originX, originY + originCursorSize);
this.canvasContext.moveTo(originX - originCursorSize, originY);
this.canvasContext.lineTo(originX + originCursorSize, originY);
this.canvasContext.stroke();
this.frameNumberDiv.className = 'instruction';
this.frameNumberDiv.innerText =
2019-09-27 00:45:28 +00:00
'Frame ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
2019-09-26 01:59:16 +00:00
}
2019-09-25 03:16:07 +00:00
}
2019-09-26 23:28:35 +00:00
2019-09-27 00:45:28 +00:00
private windowAnimationUpdate = (timestamp: number) => {
if (this.start === 0) {
this.start = timestamp;
}
const progress = timestamp - this.start;
if (this.playingAnimation && progress > 1000 / this.animationData.frameRate) {
this.AdvanceFrames(1);
this.start = 0;
}
window.requestAnimationFrame(this.windowAnimationUpdate);
2019-09-27 01:07:41 +00:00
// console.log('timestamp = ' + timestamp);
2019-09-27 00:45:28 +00:00
};
2019-09-25 03:16:07 +00:00
}