Question

Basically, if I use stage.onFrame(function(frame){animationLayer.draw()}); then I get a jerky animation, but if I do something like setInterval(draw, 25); and then animationLayer.draw(); in draw, then I get a nice smooth animation.

Am I doing something wrong with KineticJS or is it just a bit sucky on the performance? I was only spinning a rectangle but it appears so jerky.

It’s worse in chrome than in firefox but firefox still isn’t completely smooth.

Anyone have any ideas why?

    var debug, stage, animationLayer;
    var sw, sh;
    var spinRect;

    var blobArray = [];

    window.onload = function() {
        debug = document.getElementById('debug');

        stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
        animationLayer = new Kinetic.Layer();    
        sw = stage.attrs.width;
        sh = stage.attrs.height;

        spinRect = new Kinetic.Rect({
            x: sw/4*3, 
            y: sh/2,
            width: 50, 
            height: 50,
            fill: "#eee", 
            stroke: "#777",
            strokeWidth: 2,
            centerOffset: {
                x: 25,
                y: 25
            }
        });

        var centerRect = new Kinetic.Rect({
            x: sw/4-5, 
            y: sh/2-5,
            width: 10, 
            height: 10,
            fill: "cyan",
            stroke: "black",
            strokeWidth: 2
        });

        animationLayer.add(spinRect);
        animationLayer.add(centerRect);
        stage.add(animationLayer);

        setInterval(update, 25); // 33 ms = 30 fps, 25 ms = 40 fps

        stage.onFrame(function(frame){animationLayer.draw()});
        stage.start();
    };

    function update()
    {
        spinRect.rotate(0.03); //Math.PI / 100); // even removed this for less calculations
        // animationLayer.draw() // smoother if I use this instead
    }

Thanks

Edit: Turns out that Chrome is to blame for some of the issues here, a recent update has been causing some trouble.

Answer 1

v3.9.4 will be released later today which has some significant animation and transition improvements. Is this animation smooth for you?

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

Also, animations can be jerky if you have lots of other stuff running at the same time. Check out this example that uses the requestAnimFrame and see if this is smooth or not (pure JS, no library):

http://paulirish.com/2011/requestanimationframe-for-smart-animating/