Question

I am working on a canvas project in Kinetic JS. I would like to know if there is a way of changing the scale of an object in the transitionTo method. Below is a simplified version of my code. I realise that you can do this by using the animate method but for reasons that would take a lot to explain i don’t want to do it this way.

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 1600,
        height: 1200
    });

        var layer = new Kinetic.Layer();
        var book = new Image();
    book.onload = function () {
        bookImg = new Kinetic.Image ({ x: 800, y: 680, image:book, name:book, offset: [85.5, 106], opacity: 0,});

        layer.add(bookImg);
        stage.add(layer);
    }
book.src = "images/book.png";

    setTimeout(function() {
       bookImg.transitionTo({ x: 800, y: 680, opacity: 1, duration: 4, });
    }, 1000);



};

So within that transition to i want to alter the scale of the object. So have the original scale as something like 0.5 going up to 1. However I can’t find any documentation to help.

Any thoughts?

Answer 1

Use the scale property to change it from:

bookImg = new Kinetic.Image({
   x: 100,
   y: 110,
   image: book,
   name: book,
   offset: [85.5, 106],
   opacity: 0,
   scale: { x:0.5, y:0.5 }

});

to:

bookImg.transitionTo({
   x: 100,
   y: 110,
   opacity: 1,
   duration: 4,
   scale: { x:1, y:1 }

});

You can see it working here