Cytoscape.js 动画序列

Question

我正在尝试使用 cytoscape.js 动画来可视化节点是如何插入到特定类型的树中的。我需要运行许多不同的动画，包括操纵序列中节点的位置。当我尝试使用延迟运行它们时，它不起作用 - 它们没有按顺序进行，所以我正在创建动画，将它们推入这样的数组中（这是一个例子，我有不同的动画种类):

animationArray.push(cy.nodes("[id='" + node.key + "']").animation({
        position: { x: current.x + 50, y: current.y + 50 },
        easing : easing,
        duration: duration,
        complete: function(){}
    }));

然后使用遍历数组的函数将它们全部播放 - 这样，它们运行按顺序排列：

playAnimation(animationArray, 0);

function playAnimation(aniArray, i) {
    if (i === aniArray.length) {
        return;
    }
    aniArray[i].play().promise().then(function () {
        playAnimation(aniArray, i + 1)
    })
}

注意：我相信一定有更好的方法来按顺序运行动画，但这是我得到的最好的方法。

我的问题是，当我在其中一个动画中更改节点的位置时，它不会停留在新位置，而是 returns 回到开始时的位置。例如，节点位于位置 A。在第一个动画中，我将它从 A 移动到位置 B，在第二个动画中，我想将它从 B 移动到 C。但是在第一个动画之后，节点又回到了 A，所以它而是从 A 移动到 C。我试图通过在 complete: function(){} 中将节点的位置设置为 B 来解决它，但它没有按预期工作。看起来所有这些完整的功能都是同时执行的，而不是按照我的动画顺序执行的。

有什么建议我该如何处理？

Answer 1

我明白了。我猜想在将动画推入数组时，它正在使用有关节点的当前信息进行初始化，之后执行的动画不会对其产生影响。所以当推送第二个动画时，它应该将节点移动到 C，它会查看节点并找出它的位置，它仍然是 A，因为第一个动画还没有运行。所以我添加了类似的内容：

cy.$('#' + x.key).position({
        x: current.x + 50,
        y: current.y + 50
    });

将动画推入数组后。最后，我将 x 位置设置回起始位置，然后运行动画数组。

Cytoscape.js 动画序列

Cytoscape.js animation sequence

animation

position

sequence

cytoscape.js