Question

我想要一个动画，其中节点变色，然后边缘变色。我在cytoscape.js中查看了有关动画的其他问题，并尝试堆叠promise语句无济于事。

我还不清楚队列的作用，将边缘和节点的布尔值设置为true，false或交错似乎对动画没有影响，因为它们同时具有动画效果。

这是我到目前为止的代码：

var a = cy.edges().animate({
position: { x: 100, y: 100 }, 
style: { lineColor: '#a79' }}, {duration: 1000},
{queue: 1}
);



var b = cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }}, 
{duration: 1000},
{queue: 1}
);

a.animation().play().promise().then(b.animation().play());

修改的所以我将animate命令包装在函数中以获得所需的结果

    cy.on('tap', 'node', function(evt){

  cy.nodes().animate(
    {
        position: { x: 100, y: 100 }, 
        style: { lineColor: 'pink' }
    },
    {
        duration: 1000,
        queue: true
    }
);

尽管硬编码动画并不理想，但我仍然想知道如何使用promise命令。

Answer 1

看起来不错，我唯一看到的是：

var a = cy.edges().animate(
    {
        position: { x: 100, y: 100 }, 
        style: { lineColor: '#a79' }
    },
    {
        duration: 1000,
        queue: true
    }
);



var b = cy.nodes().animate(
    {
        position: { x: 100, y: 100 },
        style: { backgroundColor: 'blue' }
    }, 
    {
        duration: 1000,                // This goes together in one brace
        queue: true                    // Use a boolean maybe
    }
);

a.animation().play().promise().then(function () {
    b.animation().play());
}

文档正是如此，也许这解决了问题：）

cytoscape.js顺序动画

1 个答案: