Cytoscape.js: 带动画的cose布局

Question

我正在尝试为 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 制作动画。

我做错了什么？

Answer 1

像 CoSE 这样的连续布局动画。也就是说，它在它所做的计算的迭代过程中进行动画处理。如果布局运行非常快——就像 CoSE 经常做的那样——那么你将不会得到太多动画。

正在讨论一项提议，可以选择为连续布局设置动画，例如离散布局（即开始和结束位置之间的补间）。

如果您现在想要此行为，则必须运行布局 while batching. Now that you have saved the start and end positions for each node, you can just end batching and animate。

Answer 2

您现在可以在布局定义中使用 animate: 'end' 来执行此操作。参见 https://github.com/cytoscape/cytoscape.js/blob/unstable/src/extensions/layout/cose.js#L31。这将使节点从它们的初始起始位置到它们的结束位置进行动画处理，与 animate: true 相比，后者将对布局中的变化进行动画处理，并且仅在一定时间阈值后才这样做（请参阅 animateThreshold） .

Cytoscape.js: 带动画的cose布局

Cytoscape.js: cose layout with animation

animation

cytoscape.js