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

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

我的问题是，当我改变了动画的一个节点的位置，它不会保留在新的位置，并返回到它在哪里开头。例如，所述节点是在位置A在第一动画我将其移动从A到位置B和在第二动画我想将它从乙移动到C.但第一动画之后，该节点是回A，因此它移动从A到C代替。我试图通过在complete: function(){}设置节点的位置到B来解决，但如预期没有奏效。它看起来像所有这些功能齐全得到了在同一时间与我的动画序列执​​行，而不是为了。

任何意见，我应该如何处理呢？

Answer 1

我想到了。我想，虽然动画推到一个数组中，它被初始化所述节点当前的信息，在那之后执行的动画并不能使它的影响。所以推秒的动画，这应该移动节点到C时，它看起来在节点并找出它的位置，这仍然是一个，因为第一个动画并没有运行。于是，我又补上一句：

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

推动画成阵列之后。最后，我设置x位置返回到开始的位置，然后我运行动画阵列。