Stage tweening

[polymeris]

Was trying to smoothy pan the stage tweening its offset. It doesn't work. Neither does tweening opacity or scale. Note that the stage's width & height can be tweened.

(EDIT: It works on chrome 26, but not on Firefox 24, kinda... sometimes it seems to only move some subnodes or not redraw all frames)

This seems limiting, but if this is intended, it should be documented.

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 200,
        height: 200
      });

      var layer = new Kinetic.Layer();
      var rect = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'green'
      });

      layer.add(rect);
      stage.add(layer);

      var tween = new Kinetic.Tween({
        node: stage, 
        duration: 1,
        offset: 100,
      });

      setTimeout(function() {
        tween.play();
      });

[jfollas]

You'll probably want to use offsetX and offsetY instead of offset (which takes an object now with x and y properties). And, while it doesn't appear that the stage supports this tween (in my few minutes of playing around), you can definitely tween a layer:

http://jsfiddle.net/PQ9um/

[polymeris]

Yes, that was a typo, I meant offsetX.

The thing is, I already have multiple layers. How can I tween them all simultaneously? is there some sort of layer-container? Neither Container nor Group seems to work.

Thanks for your help!

[jfollas]

It appears that the built in tweening engine can only go as low as the layer (which directly maps to a canvas in the DOM).

Nothing stops you from using an external tweening engine, such as the GreenSock Animation Platform (http://www.greensock.com/get-started-js/).

Check out this modified version of that fiddle:

http://jsfiddle.net/PQ9um/2/

(Just be aware that each canvas is being redrawn with each frame, so performance may become an issue, especially if the rendering logic and/or garbage collection takes longer than a frame's timeslice to execute).

[polymeris]

Thanks. That seems like a good workaround.

[jfollas]

I discovered today that there's a Greensock plugin for Kinetic: http://api.greensock.com/js/com/greensock/plugins/KineticPlugin.html