Cytoscape js中节点的淡入过渡答案

【问题标题】：Fade-in transition of nodes in Cytoscape jsCytoscape js中节点的淡入过渡
【发布时间】：2018-08-23 12:41:27
【问题描述】：

我一直在尝试使用 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});

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

【问题讨论】：

标签： javascript jquery-animate cytoscape.js

【解决方案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'
});

【讨论】：