Pürüzsüz KineticJS animasyonu, kontrollü hız

Question

KineticJS'de eğlenceli bir uçak animasyonu yaratıyorum.

Şu anda animasyon biraz sarsıntılı bir şekilde çalışıyor; nasıl başlayacağımı bilmeme rağmen bir miktar gevşeme ya da ara vermek isterim.

Matematiği olan herkes bana yardım edebilir mi?

<div id="container"></div> 

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.0-beta.js"></script> 

<script defer="defer"> 
    var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 870, 
    height: 392 
    }); 

    var layer = new Kinetic.Layer(); 

    var xPos = 0; 
    var yPos = 126; 
    var growthFactorX = 6; 
    var growthFactorY = 2.6; 
    var growthFactorP = 3; 
    var planeRotation = 30;  

    // dashed line 
    var trail = new Kinetic.Line({ 
    points: [{x: xPos,y: yPos}], 
    stroke: 'white', 
    strokeWidth: 2, 
    lineJoin: 'round', 
    dashArray: [6, 5] 
    }); 

    var imageObj = new Image(); 
    imageObj.src = '/assets/img/plane.png'; 
    var plane = new Kinetic.Image({ 
    x: xPos, 
    y: yPos - 15, 
    width: 54, 
    height: 30 
    }); 
    imageObj.onload = function() { 

    plane.setImage(imageObj); 
    layer.add(plane); 
    stage.add(layer); 
    }; 
    plane.rotateDeg(planeRotation); 


    layer.add(trail); 
    stage.add(layer); 

    var anim = new Kinetic.Animation(function(frame) { 


     if(xPos < 500) { 

      xPos = growthFactorX + xPos; // adds 3 to xPos on each loop 

      if(xPos > 400) { 

       yPos = yPos - growthFactorY; 

       if(plane.getRotationDeg() > 0) 
        plane.rotateDeg((-growthFactorP)) ; 
      } 

      var curPoints = trail.getPoints(); 
      var newPoints = [{x: xPos, y: yPos}]; 

      trail.setPoints(curPoints.concat(newPoints)); 
      plane.setX(xPos + 10); 
      plane.setY(yPos - 35); 
     } 
     else { 

      anim.stop(); 
     } 
    }, layer); 

    anim.start();  
</script> 

Answer 1

Sana bir keman yarattık,

ve bu faktörlerin değişmiştir arkadaşları bana pürüzsüz görünüyor düşünce, lütfen bana bildirin herhangi şartname eğer

var xPos = 0; 
    var yPos = 126; 
    var growthFactorX = 5; 
    var growthFactorY = 2; 
    var growthFactorP = 1; 
    var planeRotation = 30;  

fiddle link

Umarız bu olur :)