Последовательность анимации Cytoscape.js - PullRequest
Новая
       10

Последовательность анимации Cytoscape.js

0 голосов
/ 05 февраля 2019

Я пытаюсь использовать анимацию 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, а во второй анимации я хочу переместить его из позиции B в C. Но после первой анимации узел возвращается в положение A, поэтомупереходит от А к С вместо.Я попытался решить эту проблему, установив позицию узла на B в этом complete: function(){}, но это не сработало, как ожидалось.Похоже, что все эти полные функции выполнялись одновременно, а не в порядке с моей последовательностью анимации.

Любой совет, как мне подходить к этому?

1 Ответ

0 голосов
/ 06 февраля 2019

Я понял это.Я предполагаю, что при вставке анимации в массив она инициализируется текущей информацией об узлах, и анимации, выполняемые после этого, не влияют на нее.Таким образом, при нажатии второй анимации, которая должна переместить узел в C, он смотрит на узел и выясняет его положение, которое по-прежнему равно A, потому что первая анимация еще не запущена.Поэтому я добавил что-то вроде: 

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

после добавления анимации в массив.В конце я устанавливаю позицию x обратно в начальную позицию, а затем запускаю анимационный массив.

...