CODEWITHSUNDEEP
javascriptperformancecanvaskineticjs
unclejam
unclejam

Reputation: 341

Improving Animation performance with KineticJS

A similar question was asked about performance but I was unable to learn anything from the resulting answers.

I need to have many different sized orbs animating in a night sky as if they are floating upward. I found some code that I modified that has no libraries and is pure canvas. The demo I made works perfectly and animations are very smooth even with many particles using request animation frame.

See demo here: http://jsfiddle.net/kennygfunk/B3gqa/1/

/************* SHIM ************************/
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  window.oRequestAnimationFrame      ||
                  window.msRequestAnimationFrame     ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();

Each of these orbs needs to stop animating on hover and animate to the center of the browser window on click. I have been able to achieve this with kineticJS, but I have completely lost the performance I had with pure canvas.

See here: http://jsfiddle.net/kennygfunk/Ly7Cs/1/

My question is, how do I increase performance and still have that functionality. What am I currently doing with kineticJS that I could improve.

One thing I tried is to off load different numbers of nodes per layer. 5 per layer, 10 per layer. This does not seem to help much.

Anything you can give me will be greatly appreciated. Thank you community!

Upvotes: 1

Views: 323

Answers (1)

lavrton
lavrton

Reputation: 20288

You are using many effects. So performance is low. I think best way is cache nodes to images.

node.toImage({
    mimeType : "image/png",
    width : random_rad * 2,
    height : random_rad * 2,
    callback : function(img){
        var image = new Kinetic.Image({
            image:img,
            x : random_x
                                      });
        node.destroy();
        layer.add(image);
        animate_lanterns(image, layer);
    }
});

There is only one layer here. FPS is more then 60 on my station. Example: http://jsfiddle.net/lavrton/eg3xV/

For selecting you can add red circle to stage insted of setStroke, then remove it.

Upvotes: 1

Related Questions