To wygląda jakrequestAnimationFrame jest de facto sposobem animowania rzeczy teraz. W większości działało to całkiem nieźle, ale teraz próbuję zrobić kilka animacji na płótnie i zastanawiałem się: czy jest jakiś sposób, aby upewnić się, że działa z pewnym fps? Rozumiem, że celem rAF jest konsekwentnie płynne animowanie, i mogę narazić się na przerywanie animacji, ale teraz wydaje się, że działa dość drastycznie z różnymi prędkościami i zastanawiam się, czy jest sposób na walkę to jakoś.

UżyłbymsetInterval ale chcę optymalizacji, które oferuje rAF (szczególnie automatycznie zatrzymuje się, gdy karta jest skupiona).

W przypadku, gdy ktoś chce spojrzeć na mój kod, to prawie:

animateFlash: function() {
    ctx_fg.clearRect(0,0,canvasWidth,canvasHeight);
    ctx_fg.fillStyle = 'rgba(177,39,116,1)';
    ctx_fg.strokeStyle = 'none';
    ctx_fg.beginPath();
    for(var i in nodes) {
        nodes[i].drawFlash();
    }
    ctx_fg.fill();
    ctx_fg.closePath();
    var instance = this;
    var rafID = requestAnimationFrame(function(){
        instance.animateFlash();
    })

    var unfinishedNodes = nodes.filter(function(elem){
        return elem.timer < timerMax;
    });

    if(unfinishedNodes.length === 0) {
        console.log("done");
        cancelAnimationFrame(rafID);
        instance.animate();
    }
}

Gdzie Node.drawFlash () to tylko kod, który określa promień oparty na zmiennej licznika, a następnie rysuje okrąg.