Smooth animations in kinetic.js (html5 canvas)

Question

I need a better understanding of kinetic.js animation. I was using the tutorial found http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/ . I played with the code and made my animation set my rectangle at x position 100. My question is how do I the movement of the rectangle to have a smooth transition. I was unable to get my head wrapped around the explanation of kinetic.js animations off the html5canvastutorials.com. here is my code.

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

Can someone please give me an example of how to create smooth animations and a great explanation of how to repeat the process. Not sure how frame timing works either.

Answer 1

I think you should look at this change:

API Changes new Tween class. The old Transition class has been retired. For advanced tweens, such as tweening things along curves, or constructing timelines, KineticJS recommends the GreenSock Animation Platform which integrates seamlessly.

Answer 2

For simple tweens, you can use the built in Tween class. Here's an example:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/