You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.1 KiB
32 lines
1.1 KiB
<!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> |