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

View File

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

View File

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

View File

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

6
dist/index.html vendored
View File

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