sonsuz döngü oluşturur

Question

Burada bir çalışma tuval animasyon vardır: http://codepen.io/lexbi/pen/KzZKze

yerine requestAnimationFrame kullanmak setTimeout kullanarak dönüştürmek çalışıyorum rağmen.

Neyi başarmaya çalıştığımı kısaca özetlediğim gibi, bir tuval öğesinde görüntüyü birden fazla bloğa ayırdım, daha sonra "tam" görüntüyü yeniden oluşturmak için bu blokları ayrı ayrı canlandırmak istiyorum. (setTimeout'u kullanan kod yazıcısı mükemmel çalışır).

Bu, animasyonun bir parçası gibi görünüyor ve bloğun konumlarının bir kısmı güncelleştiriliyor, AMA, aslında animasyonun gerçekleşmediğini görüyorsunuz.

activeBlocks nesnesi için oluşturduğum döngüsünün erken bittiğine inanıyorum. animasyon sona erdikten önce Anlamı bu koşullu içinde else alır (hangi olmamalıdır):

if((blocks[blocks.length-1].x != blocks[blocks.length-1].toX)){ 
     updateAndRender = true; 
    }else{ 
     updateAndRender = false; 
     window.cancelAnimationFrame(requestId); 
    } 

birisi önerebilir misiniz

yanlış burada ne işim var? (Çöker çünkü) bir codepen yapıştırarak anlamı yok gibi

buraya dönüştürmek için elimden geleni girişimi görünce: Bu yanlış yoldan yaklaşan bu yüzden Tamam

var canvas = document.getElementById("canvas"), 
    context = canvas.getContext("2d"), 
    img = new Image(), 
    rowPieces = 10, 
    columnPieces = 10, 
    totalPieces = rowPieces*columnPieces, 
    workingPiece = 0, 
    blocks = [], 
    activeBlocks = [], 
    minWait = 10, 
    lastTime = +new Date(), 
    updateAndRender = true, 
    requestId; 

img.src = "http://lastresistance.com/wp-content/uploads/2014/09/ATT-fat-cat.jpg"; 

// // set height & width 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

img.onload = function(){ 

    function theLoop(){ 
    var loopCount = 0; 
    for(var colCount=0;colCount<columnPieces;colCount++){ 
     for(var rowCount=0;rowCount<rowPieces;rowCount++){ 
     blocks.push(
      new Block(
      (canvas.width/rowPieces), // w 
      (img.width/rowPieces), // sWidth 
      (canvas.height/columnPieces), // h 
      (img.height/columnPieces), // sHeight 
      ((img.width/rowPieces)*rowCount), //sx 
      ((canvas.width/rowPieces)*rowCount), //x 
      (canvas.width/rowPieces), // fromX 
      ((canvas.width/rowPieces)*rowCount), // toX 
      ((img.height/columnPieces)*colCount), // sy 
      ((canvas.height/columnPieces)*colCount), // y 
      (canvas.height/columnPieces), // fromY 
      ((canvas.height/columnPieces)*colCount), // toY 
      loopCount // Loop count, starting on 0 
     ) 
     ); 
     loopCount++; 
     } 
    } 

    } 

    theLoop(); 

    function Block(w, sWidth, h, sHeight, sx, x, fromX, toX, sy, y, fromY, toY, loopCount){ 
    this.w = w; 
    this.sWidth = sWidth; 
    this.h = h; 
    this.sHeight = sHeight; 
    this.sx = sx; 
    this.x = -x; 
    this.fromX = fromX; 
    this.toX = toX; 
    this.sy = sy; 
    this.y = -y; 
    this.fromY = fromY; 
    this.toY = toY; 
    this.i = loopCount; 
    } 

    Block.prototype.update = function(){ 
    // so if the increment is NOT enlarged by "1" the position could final up being offset 
    if(this.y < this.toY){ 
     this.y+=40; 
    } 
    //reset the y pos 
    if(this.y > this.toY){ 
     this.y = this.toY; 
    } 
    // so if the increment is NOT enlarged by "1" the position could final up being offset 
    if(this.x < this.toX){ 
     this.x+=40; 
    } 
    // reset the x pos 
    if(this.x > this.toX){ 
     this.x = this.toX; 
    } 
    }; 

    Block.prototype.render = function(){ 
    context.drawImage(img, this.sx, this.sy, this.sWidth, this.sHeight, this.x, this.y, this.w, this.h); 
    }; 

    //draw the screen 
    function animate() { 

     // This stops active blocks from growing larger than intended 
     if(activeBlocks.length <= blocks.length){ 
     activeBlocks.push(blocks[workingPiece]); 
     if(workingPiece <= totalPieces){ 
      workingPiece = workingPiece+1; 
     }else{ 
      workingPiece = 0; 
     } 
     } // endif 

     context.clearRect(0,0,canvas.width, canvas.height); 

     for(var ei = 0; ei < activeBlocks.length; ++ei){ 
     if((blocks[blocks.length-1].x != blocks[blocks.length-1].toX)){ 
      updateAndRender = true; 
     }else{ 
      updateAndRender = false; 
      window.cancelAnimationFrame(requestId); 
     } 
     if(updateAndRender == true){ 
      // For some reason this still fires for 70 loops, not sure why, though this undefined IF at least stops errors in the console 
      if("undefined" !== typeof activeBlocks[ei]){ 
      activeBlocks[ei].update(); 
      activeBlocks[ei].render(); 
      requestId = window.requestAnimationFrame(animate); 
      } 
     } // endif 
     } // for 

    }; 
    requestId = window.requestAnimationFrame(animate); 
} 

Answer 1

bu makale bana yardımcı oldu Özellikle bu http://creativejs.com/resources/requestanimationframe/

: başa daha iyi bir yol anlamaya

Esasen ben requestAnimationFrame(draw) güncellenmesi edildi

var fps = 15; 
function draw() { 
    setTimeout(function() { 
     requestAnimationFrame(draw); 
     // Drawing code goes here 
    }, 1000/fps); 
} 

Yanlış yer, animate işlevinin içinde olmalıdır.