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 }

}）;

您可以看到它有效here

KineticJS过渡到规模

1 个答案: