animation - Cytoscape.js:带动画的 cose 布局

标签 animation cytoscape.js

我正在尝试以动画方式呈现 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/

相关文章:

javascript - 我如何自定义 cytoscape.js 中的边缘,以便线条为虚线和动画/闪烁?

javascript - 渲染图形后更改边缘标签

python - 文本缩放效果颤抖

swift - 无法从 `UIStackView` 中删除轴动画

javascript - cytoscape.js - 如何合并来自不同来源的同一节点的属性

cytoscape.js - 如何在 Cytoscape 力导向图中配置连续布局模拟?

javascript - 我怎样才能使这个过渡平滑而不是跳跃起来

javascript - 相当于 jQuery 的@keyframes

java - 为什么我的动画第一次播放时不流畅?