Question

我一直在尝试使用animate（）使图表中添加的节点和边“平滑”显示，以逐渐更改其不透明度！但是我在动画的工作方式上缺少了一些东西，所以我无法使其像预期的那样工作！我已经将节点和边的不透明度都初始化为0，如下所示：

 'selector': 'node[id*="local"]', // local endpoint nodes
            'style': {
                'shape': 'rectangle',
                'width': '50px',
                'height': '50px',
                'opacity': 0,
                'background-color': 'white',
                'background-image': 'assets/db.png',
                'background-fit': 'cover cover',
                'label': 'data(id)',
                'text-margin-y': '10px',
                'text-valign': 'bottom',
                'text-halign': 'center',
                'text-outline-color': '#ccc',
                'text-outline-width': 3
            }
        }, {
            'selector': 'edge[target*="local"]',
            'style': {
                'width': 3,
                'opacity': 0,
                'line-color': '#1e11c2',
                'target-arrow-color': '#ccc',
                'font-family': 'cursive',
                'target-arrow-shape': 'triangle',
            }

        },

，我尝试通过以下方式进行更改：

 cy.nodes("[id*='local']").animate({'style': {'opacity': 0.2}}, {'duration': 600}).delay(200).animate({'style': {'opacity': 0.6}}, {'duration' : 600}).animate({'style': {'opacity': 1}}, {'duration': 600});
 cy.edges("[target*='local']").animate({'style': {'opacity': 0.2}}, {'duration': 600}).delay(200).animate({'style': {'opacity': 0.6}}, {'duration' : 600}).animate({'style': {'opacity': 1}}, {'duration': 600});

使用这些线，图形元素甚至不会出现在图形中。有什么想法我做错了什么以及如何使它起作用吗？

Answer 1

您的代码似乎还可以，这就是我用来实现此目的的方法（也许使用此语法和空格以提高可读性）：

currentElements.animate({              // you can create a collection with edges and nodes for this
    style: { opacity: yourValue},
    duration: 600,
    easing: 'ease-in-sine'
}).delay(200).animate({
    style: { opacity: yourNextValue},
    duration: 600,
    easing: 'ease-in-sine'
}).delay(0).animate({
    style: { opacity: yourLastValue},
    duration: 600,
    easing: 'ease-in-sine'
});

Cytoscape js中节点的渐入过渡

1 个答案: