2015-07-06 43 views
-2

我正在学习Javascript和canvas动画。试图用动画做一些事情来提升我的技能,这次它是一款简单的老虎机。AnimationFrame动画速度如此之慢的原因是什么?

如果有人能解释我为什么这台“机器”如此缓慢,这将是伟大的?我做错了什么?

我想使用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; 

     } 
    }; 
+0

慢是很模糊的,你能提供一个工作的例子吗? – vitr

+0

@DarthJS我建议你花些时间阅读这个http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/我用它,并没有动画问题。 – rottenoats

+0

@vitr是的,我知道。我试图把它放入Jsfiddle,但它不起作用 [JSFiddle链接](http://jsfiddle.net/Ldso8sac/) – DarthJS

回答

2

我已经凝聚你的代码了一点,这就是我见:

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 
} 
+0

我已经解决它,但任何方式非常感谢您的示例和建议,我会记住它。谢谢 – DarthJS

相关问题