mirror of
https://github.com/RetroDECK/ES-DE.git
synced 2024-11-24 23:25:38 +00:00
32 lines
1.1 KiB
HTML
32 lines
1.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<canvas id="rlottie" width="100" height="100"></canvas>
|
||
|
|
<script>
|
||
|
|
var Module = {
|
||
|
|
onRuntimeInitialized: function() {
|
||
|
|
|
||
|
|
class Animator {
|
||
|
|
constructor(){
|
||
|
|
this.instance = new Module.RlottieWasm();
|
||
|
|
this.canvas = document.getElementById("rlottie");
|
||
|
|
this.frames = this.instance.frames();
|
||
|
|
this.curFrame = 0;
|
||
|
|
this.tick_cb();
|
||
|
|
}
|
||
|
|
tick_cb() {
|
||
|
|
var context = this.canvas.getContext('2d');
|
||
|
|
var buffer = this.instance.render(this.curFrame, this.canvas.width, this.canvas.height);
|
||
|
|
var clampedBuffer = Uint8ClampedArray.from(buffer);
|
||
|
|
var imageData = new ImageData(clampedBuffer, this.canvas.width, this.canvas.height);
|
||
|
|
context.putImageData(imageData, 0, 0);
|
||
|
|
this.curFrame += 1;
|
||
|
|
if (this.curFrame >= this.frames) this.curFrame = 0;
|
||
|
|
window.requestAnimationFrame(()=>{ this.tick_cb();});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var instance = new Animator();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script src="rlottie-wasm.js"></script>
|
||
|
|
</html>
|