html - KineticJS 过渡到缩放

Question

我正在用 Kinetic JS 开发一个画布项目。我想知道是否有办法在 transitionTo 方法中改变对象的比例。下面是我的代码的简化版本。我意识到你可以通过使用 animate 方法来做到这一点，但出于需要大量解释的原因，我不想这样做。

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);



};

所以在过渡到我想改变对象的比例。因此，将原始比例设置为 0.5 到 1。但是我找不到任何帮助文档。

有什么想法吗？

Answer 1

使用该scale属性将其更改为：

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 }

});

到：

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

});

你可以看到它在这里工作