Cytoscape.js 在返回之前动画出视口

Question

是否可以从一个缩放级别的渲染位置平滑动画到另一个缩放级别的渲染位置，所有图形元素都保留在视口内？

这是一个展示我的问题的 jsbin。加载大图后，单击其中一个节点并注意它是如何在屏幕外然后在屏幕上显示动画的。 （您需要视口足够窄。）

https://jsbin.com/mimesam/9/edit?js,output

有没有办法解决这个问题？我真的希望布局动画在默认情况下工作，以便在布局动画期间考虑fit（缩放/平移），以便布局适合的渲染位置彼此平滑地动画。

描述：从几百个元素的图表开始。使用布局生成初始位置。使用足够小的视口，以至于模型位置对于视口来说太大，因此fit 会导致缩放。

然后选择图形的一个子集，并在该子集上调用相同的 fit 布局。

理想情况下，图形的子集应该在一个方向上平滑动画，从原始位置到新位置。

相反，我看到了 swoopy 行为，其中元素在到达模型位置的途中动画出视口，然后开始拟合并动画回到缩放的渲染位置。

Answer 1

尝试一步一步制作动画

cy.animate({
  fit: { eles: cy.$() },
  duration: 500,
  complete: function () {
    setTimeout(function () {
      cy.layout({
        name: 'breadthfirst',
        animationDuration: 2000,
        animate: true,
        fit: true,
        directed: true,
      }).run();
    }, 500);
  },
});