javascript - Konva.js : simultaneously run tweens look out of sync

Question

情况是这样的。我有一组节点，需要它们向上移动然后向下移动。为此，我使用 Konva.Tween as in the demo 。如您所见，我在 for 循环中创建并运行补间。我想要的是所有方 block 同步移动，但看起来有些方 block 正在完全移动，但有些方 block 却发疯了，移动有延迟或其他什么。有趣的是，如果你多次点击“GO”按钮，你会发现是相同的方 block 不同步，而不是随机的，所以这是持久的。

我做错了什么，有正确的方法来实现我需要的吗？

Answer 1

将它们添加到 Konva.Group，然后在该组上运行补间。您可以在创建它们时将它们添加到组中，也可以在需要补间它们之前使用 rect.moveTo(group) [OR group.add(rect)]。

var tweenGroup = new Konva.Group();
layer.add(tweenGroup);

document.getElementById('go').addEventListener('click', () => {
    const durationSec = 0.3;
    for (const r of rects) {
        tweenGroup.add(r);
    }
    new Konva.Tween({
        node: tweenGroup,
        y: 70,
        duration: durationSec / 2,
        onFinish: function() {
            new Konva.Tween({
                node: tweenGroup,
                y: 100,
                duration: durationSec / 2
            }).play();
        }
    }).play();
})

这是更新后的代码笔，它们同步移动。 https://codepen.io/richardjonlewis/pen/VwrGqNN