typescript - Använd requestAnimationFrame i en klass

Jag har problem med att lista ut hur jag kan använda requestAnimationFrame i en klass.

Denna kod fungerar bra:

window.onload = function () {
    var width = 20;
    function animation() {
        width++;
        var element = document.getElementById("box");
        element.style.width = width + "px";
        requestAnimationFrame(animation);
    }
    requestAnimationFrame(animation);
};

Men när jag försöker sätta in det i en klass får jag inget resultat.

class Animation{
    width: number = 20;

    constructor() {
        requestAnimationFrame(this.loop);
    }
    loop() {
        this.width++;
        var element = document.getElementById("box");
        element.style.width = this.width + "px";
        requestAnimationFrame(this.loop);
    }
}
window.onload = function () {
    var animation = new Animation();
};

Kan någon säga åt mig vad som är fel här?

Svar #1

requestAnimationFrame(this.loop); Om du skickar en funktion till någon annan som de kommer att anropa, använd en pil, t.ex. requestAnimationFrame(()=>this.loop()); eller loop =() => {

Mer: https://www.youtube.com/watch?v=tvocUcbCupA

Relaterade artiklar