1

After upgrading kineticjs from 4.0.5 to 4.5.1, I get

Uncaught TypeError: Object #<Object> has no method 'transitionTo'

Following code works with the previous version:

gameLayer.transitionTo({
        duration: '0.5',
        opacity: 1,
        callback: function() {
            intervalId = setInterval(reDraw, 33);
            isInteractive = true;

        }
    });

Whats the the alternative function for transitionTo in 4.5.1

UPDATE

I opened an issue over Github, according to the guy transitionTo has been removed and it is replaced by Tween

Regards,

1

2 Answers 2

3

You can use the onFinish attribute as below :

 var tween = new Kinetic.Tween({
    node: rect, 
    duration: 1,
    x: 400,
    y: 30,
    rotation: Math.PI * 2,
    opacity: 1,
    strokeWidth: 6,
    scaleX: 1.5,
    onFinish: function() {console.log('onFinish');}
  });
2

The alternative is TweenLite. It has much more functionalities than the classic Kinetic transitions so they have been deprecated and TweenLite is fully adapted to KineticJS shapes.

Here is a tutorial that shows us how to use these transitions.

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

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();
  var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 0.2
  });

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

  var tween = new Kinetic.Tween({
    node: rect, 
    duration: 1,
    x: 400,
    y: 30,
    rotation: Math.PI * 2,
    opacity: 1,
    strokeWidth: 6,
    scaleX: 1.5
  });

  // start tween after 20 seconds
  setTimeout(function() {
    tween.play();
  }, 2000);
1
  • Thanks, a bunch. I saw tween but was hesitated to go with. and What about the callbacks then? are callbacks supported in tweens May 20, 2013 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.