AnimationFrame動畫速度如此之慢的原因是什麼？

Question

我正在學習Javascript和canvas動畫。試圖用動畫做一些事情來提升我的技能，這次它是一款簡單的老虎機。

如果有人能解釋我爲什麼這臺「機器」如此緩慢，這將是偉大的？我做錯了什麼？

我想使用requestAnimationFrame而不是SetInterval。

而最後，對於你somebodie的是我的代碼可能是可怕的，但請記住，我只是學習:)

function main(){ // This is the main function 

canvas = document.createElement('canvas'); 
canvas.width = WIDTH; 
canvas.height = HEIGTH; 
ctx = canvas.getContext('2d'); 
document.body.appendChild(canvas); 

init(); 
canvas.addEventListener('click', function(){ 
    // update(); 
    // window.requestAnimationFrame(update); 
    // setInterval(update, 100); 
    update(); 
}); 
}; 

main(); 

function imgLoad(imgArray){ 
    var Images = []; 
    imgArray.forEach(function(link){ 
     img = new Image(); 
     img.src = link; 
     Images.push(img); 
    }); 

    return Images; 

}; 
function Reel(x ,y){ // This is my constructor with drawImage method 
    var _this = this; 
    _this.x = x; 
    _this.y = y; 
    _this.vel = 5; 
    _this.counter = 20; 

    this.changeY = function(){ 
     _this.y += _this.vel; 
    }; 
    this.draw = function(){ // this function draws rows with images 

    imgLoad(imgArray); 

    img.addEventListener('load', function(){ 
     for(var i = 0; i < imgLoad(imgArray).length; i+=1){ 

     ctx.drawImage(imgLoad(imgArray)[i], _this.x, _this.y + i * canvas.height/4, canvas.width/5, canvas.height/4); 
     } 
    }); 

}; 
function makeReels(){ // making the instances of Reel constructor 

    for(var i = 0; i < 5; i+=1){ 
     reels.push(new Reel(canvas.width/5 * i, 0)); 
    } 
}; 
function init(){ // drawing first images 
    makeReels(); 

    for(var i = 0; i < 5; i+=1){ 
     reels[i].draw(); 
    }; 
}; 
function update(){ // this is my update function the I'm redrawing images with new Y position 

    for(var i = 0; i < 5; i+=1){ 

     (function(i){ 
     setTimeout(function(){ 
      ctx.clearRect(0,0,canvas.width,canvas.height); 

     reels[i].changeY(); 
     reels[i].draw(); 
      }, 100 * i); 
     })(i); 
     }; 
     reels[0].counter --; 

     if(reels[0].counter > 0){ 
      window.requestAnimationFrame(update); 
     } 
     else { 
      window.cancelAnimationFrame(update); 
      reels[0].counter = 20; 

     } 
    }; 

Answer 1

我已經凝聚你的代碼了一點，這就是我見：

function update(){ 
    for(var i = 0; i < 5; i+=1){ 
     //calculate stuff 
     //draw stuff 
     window.requestAnimationFrame(update); 
    } 
} 

看起來每次調用更新時間（），你怎麼稱呼它5次了，那麼那些每個人都會調用update（）的5倍。更新呼叫的數量將呈指數增長。我懷疑這是你慢動畫的原因。

我建議只使用requestAnimationFrame（）來繪製東西，保持外部的計算和變量操作。

例

function myDrawFunction() { 
    //Draw stuff here 
    requestAnimationFrame(draw); 
} 

function myUpdateFunction() { 
    //Here we will be more strict about when stuff are being updated. 
    //i.e. here we care about the elapsed time since last update 
}