平滑动画在kinetic.js (html5 canvas)

我需要更好地理解kinetic.js动画。我使用的教程找到http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/。我玩了代码，让我的动画设置我的矩形在x位置100。我的问题是我如何移动的矩形有一个平稳的过渡。在html5canvastutorials.com上，我无法理解关于kinect .js动画的解释。这是我的代码。

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;
    }
});

有人可以给我一个例子，如何创建流畅的动画和如何重复这个过程的一个很好的解释。