我正在尝试以动画方式呈现 Cytoscape.js 图表布局之间的变化。
从 cose 切换到 grid 时,变化是动画的。从grid切换到cose时,只显示结束位置,没有任何动画。
我使用一个简单的测试场景,从网格布局中的小图形开始,并使用此代码来切换布局:
...
function changeLayout(type){
var options = {
name: type,
animate: true
};
cy.layout(options);
}
...
<div onclick="changeLayout('cose')">to cose</div>
<div onclick="changeLayout('grid')">to grid</div>
我还尝试了此处列出的其他选项: http://js.cytoscape.org/#layouts/cose 但我无法从网格到 cose 制作动画。
我做错了什么?
最佳答案
像 CoSE 这样的连续布局可以实时呈现动画。也就是说,它在计算的迭代过程中产生动画。如果布局运行得非常快(就像 CoSE 经常做的那样),那么您将不会获得太多动画(如果有动画的话)。
有一项提案正在讨论,可以选择为连续布局(如离散布局)设置动画(即开始位置和结束位置之间的补间)。
如果您现在想要此行为,则必须运行布局 while batching 。现在您已经保存了每个节点的开始和结束位置,您可以结束批处理并 animate .
关于animation - Cytoscape.js:带动画的 cose 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37437690/