Search code examples
androidhtmlkineticjs

VERY poor performance with KineticJS on Android :(

I'm having a stage with 1 layer, which has 100 kineticImage objects (and 100 images attached to them, of course). when I click on a kinetic image object, I wrote a very simple tween:

    var growTween = new Kinetic.Tween({
        node: that.kineticImage, 
        duration: 0.1,
        scaleX: that.kineticImage.scaleX()+0.2,
        scaleY: that.kineticImage.scaleY()+0.2
    });
    growTween.play();

You could see the entire example at: http://trueicecold.no-ip.org/pumpkin/demo.html

so each image pressed will grow by 20% over 1/10 seconds... on desktop it works perfectly fine, but on android I get poor performance... 300ms delay between the touchstart and the actual execution, and the tween is only 1-2 frames...

could it be 100 images are too heavy for android to handle? I'm using Galaxy S3.

EDIT: I've also tried with 100 circles: http://trueicecold.no-ip.org/pumpkin/demo2.html with the same result...

Solution

  • Canvas on mobile is noticeably slower than canvas on a desktop.

    And a library like KineticJS that empowers objects on the canvas will be noticeably slower than pure mobile canvas.

    For better performance, try temporarily moving your tweening object on a separate layer.

    myTweeningShape.moveTo( myTweenLayer );

    Only that 1 object gets redrawn with every tween-step and the other 99 objects (on the other layer) don't have to be redrawn.

    Then when the tween ends you can put that tweened object back on the main layer again.

    You can add the onFinish function to your tween which will fire when the tween ends.

    [Additional thoughts]

    (1) Too many new Image()'s

    Just load the pumpkin image once outside your Pumpkin "class" and use that 1 image as the image for each of your Kinetic.Image's. Don't load and save a new Image() inside each Pumpkin.

    (2) Tweens are not destroyed and therefore are accumulating

    The Kinetic.Tween does not automatically destroy itself after the tween plays, so tell each new tween to destroy itself after it plays:

    var growTween = new Kinetic.Tween({
    node: that.kineticImage, 
    duration: 0.1,
    scaleX: that.kineticImage.scaleX()+0.2,
    scaleY: that.kineticImage.scaleY()+0.2
    onFinish:function(){ this.destroy(); }
});