kinetic.js中的流暢動畫（html5 canvas）

我需要更好地理解kinetic.js動畫。我正在使用發現的教程http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/。我玩的代碼，並讓我的動畫設置我的矩形在x位置100.我的問題是如何矩形的運動平穩過渡。我無法讓我的腦袋圍繞html5canvastutorials.com上的kinetic.js動畫解釋。這是我的代碼。kinetic.js中的流暢動畫（html5 canvas）

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 960, 
    height: 480 
}); 
var layer = new Kinetic.Layer(); 

var block = new Kinetic.Rect({ 
    x: 100, 
    y: 465, 
    width: 14, 
    height: 14, 
    stroke: 'black', 
    strokeWidth: 1 
}); 

layer.add(block); 
stage.add(layer); 

var moveLeft = new Kinetic.Animation(function(frame) { 
    block.setX(1); 
}, layer); 

var moveRight = new Kinetic.Animation(function(frame) { 
    block.setX(100); 
}, layer); 

document.addEventListener('keydown', function(e){ 
    switch(e.keyCode) { 
     case 37: 
      moveLeft.start(); 
      break; 
     case 39: 
      moveRight.start(); 
      break; 
     default: 
      moveLeft.stop(); 
      moveRight.stop(); 
      break; 
    } 
});

有人可以請給我一個如何創建流暢的動畫和如何重複過程的一個很好的解釋的例子。不確定幀定時如何工作。

來源

2013-05-17 kqlambert