MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

framrate change and animation

master
Beau Blyth 2019-09-26 18:07:41 -07:00
parent 94bbbaaf3f
commit 42b384d229
4 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frame_handler.ts
View File

@ -72,6 +72,6 @@ export class FrameHandler {
this.start = 0; this.start = 0;
} }
window.requestAnimationFrame(this.windowAnimationUpdate); window.requestAnimationFrame(this.windowAnimationUpdate);
console.log('timestamp = ' + timestamp); // console.log('timestamp = ' + timestamp);
}; };
} }

11
app/page.ts
View File

@ -16,6 +16,7 @@ export class Page {
private frameHandler: FrameHandler; private frameHandler: FrameHandler;
private canvasHandler: CanvasHandler; private canvasHandler: CanvasHandler;
private animationData: IAnimationData; private animationData: IAnimationData;
private frameRateInput: HTMLInputElement;
public Load() { public Load() {
// defining blank slate animation data // defining blank slate animation data
@ -42,6 +43,9 @@ export class Page {
document.getElementById('frameNumber') as HTMLElement document.getElementById('frameNumber') as HTMLElement
); );
this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
this.frameRateInput.addEventListener('change', this.updateFrameRate);
const dropZone = document.getElementById('dropZone') as HTMLElement; const dropZone = document.getElementById('dropZone') as HTMLElement;
dropZone.addEventListener('dragover', Page.handleDragOver, false); dropZone.addEventListener('dragover', Page.handleDragOver, false);
@ -102,7 +106,7 @@ export class Page {
case 83: { case 83: {
// s // s
this.download('.anim', String(this.animationData)); this.download('.anim', JSON.stringify(this.animationData));
break; break;
} }
} }
@ -143,4 +147,9 @@ export class Page {
document.body.removeChild(element); document.body.removeChild(element);
} }
private updateFrameRate = () => {
this.animationData.frameRate = this.frameRateInput.valueAsNumber;
console.log('new frame rate = ' + this.animationData.frameRate);
};
} }

4
dist/assets/stylesheets/main.css vendored
View File

@ -4,6 +4,10 @@ div {
font-family: "Arial", Helvetica, sans-serif; font-family: "Arial", Helvetica, sans-serif;
} }
.numberinput {
width: 64px;
}
#instructions { #instructions {
font-size: 12px; font-size: 12px;
margin: auto; margin: auto;

6
dist/index.html vendored
View File

@ -23,9 +23,9 @@
</div> </div>
<div id="settings"> <div id="settings">
Origin X: <input type="text" name="originX" value="0" size="2"> Origin X: <input type="number" name="originX" value="0" class="numberinput">
Y: <input type="text" name="originY" value="0" size="2"><br> Y: <input type="number" name="originY" value="0" class="numberinput"><br>
Fps: <input type="text" name="framerate" value="60"><br> Fps: <input type="number" id="framerate" value="60" class="numberinput"><br>
<input type="checkbox" name="looping" > Looping <br> <input type="checkbox" name="looping" > Looping <br>
<button id="saveButton" type="button">export .anim with (S)</button> <button id="saveButton" type="button">export .anim with (S)</button>
</div> </div>