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