javascript - 在其他操作强制之前，组过渡不会绘制到画布上

Question

我正在尝试过渡到一个组并且它做到了，但是只有当其他东西迫使舞台被绘制时，我才能看到过渡。过渡本身不会在进行时更新画布。组内有 4 个 Kinetic.Image 和 4 个 Kinetic.Text。知道如何让它工作吗？

假设#score group x: 1000

var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
    x: 800,
    duration: 5
});

Answer 1

恐怕需要更多代码才能真正说明可能缺少的内容，但我的猜测是您将元素添加到组中，该组已经在一个层中，并且已经在舞台上。您的 transitionTo 正在缓冲区中呈现，但由于元素从未在舞台上“绘制”，因此动画不会被翻译到可视舞台。也许如果您提供更多代码或创建一个 jsFiddle，我可以提供更多见解。

同时，在调用 transitionTo 之前确保你的 4 个图像和 4 个文本对象出现在舞台上（暂时注释掉过渡），然后再试一次。

var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
    group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});

让我知道你想出了什么。