jQuery animate() smoothing

Question

Im пытается превратить перевернутую игрушку с птицами, как и им, перед одной большой проблемой.

Я пытаюсь порождать трубы препятствия сверху донизу, но анимация выглядит очень поддельной, как текстовый редактор, а не гладкой, так как я могу ее сгладить? Я попытался использовать функцию requestanimationframe, но я все равно не смог ее получить.

$(document).ready(function(){ 
//Variables 
var screenWidth = $(window).width();//Screen width 
var screenHeight = $(window).height();//Screen height 
var birdWidth = $("#bird").width();//bird width 
var y = 0;//Background y position 
var astY = 0;//Pipe position 

var bird = {//bird properties 
    goingLeft: false, 
    goingRight: false, 
    lspeed: 0, 
    rspeed: 0, 
    maxSpeed: 10 
}; 

setBirdPosition(screenWidth/2 - birdWidth/2, screenHeight/1.3 - birdWidth/2); 
startBackgroundMovement(); 
spawnPipe(); 


//Start move the screen 
function startBackgroundMovement(){ 
    setInterval(function() 
    { 
     y+=1; 
    $('body').css('background-position-y',y + 'px'); 
    }, 10); 
} 


//bird starting position 
function setBirdPosition(posX, posY) { 
    $("#bird").css("left", posX); 
    $("#bird").css("top", posY); 
    bird.position = posX; 
} 
(function birdLoop() { 
    if (bird.goingLeft) { 
     bird.lspeed = Math.min(bird.lspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.lspeed = Math.max(bird.lspeed - 0.5, 0); 
    } 
    if (bird.goingRight) { 
     bird.rspeed = Math.min(bird.rspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.rspeed = Math.max(bird.rspeed - 0.5, 0); 
    } 
    bird.position = bird.position + (bird.rspeed - bird.lspeed); 
    $("#bird").css('left', bird.position); 
    requestAnimationFrame(birdLoop); 
}()); 

//Move bird 
$(document).keydown(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= true; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
     break; 
     case 39://right 
      bird.goingRight= true; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}).keyup(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= false; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
      break; 
     case 39://right 
      bird.goingRight= false; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}); 

function spawnPipe()//spawn pipes 
{ 
    setInterval(function() 
    { 
     astY += 30; 
     $("#fullPipe").animate(
     { 
     "top":astY 
     }); 
    }, 1); 
} 
}); 

Check This: http://jsfiddle.net/icy1337/u38ratk9/

Answer 1

setInterval(function() 
{ 
    astY += 1; 
    $("#fullPipe").css("top", astY);    
}, 10); 

пример: http://jsfiddle.net/u38ratk9/6/

лучше? :)