Question

我正在尝试为Cytoscape.js图的布局之间的变化设置动画。

从cose切换到网格时，更改是动画的。当从网格切换到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 但是我无法通过网格制作动画。

我做错了什么？

Answer 1

像CoSE这样的连续布局可以实现动画效果。也就是说，它在计算的迭代期间进行动画处理。如果布局运行得非常快 - 就像CoSE经常那样 - 那么你就不会得到很多动画。

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

如果您现在想要这种行为，则必须运行布局while batching。现在您已经保存了每个节点的开始和结束位置，您可以结束批处理animate。

Answer 2

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

Cytoscape.js：cose布局与动画

2 个答案: