G6 图可视化引擎——入门教程——动画

由于动画机制较为复杂,我们未在 Tutorial-案例 中增加动画。

G6 的动画分为两个层次:

  1. 图全局动画:图整体变化时的动画过渡;
  2. 元素动画:节点和边的动画效果。

全局动画

G6 的全局动画指通过图实例进行操作时,产生的动画效果。例如:

  • graph.updateLayout(cfg)

通过实例化图时配置 animate: true,可以达到每次进行上述操作时,动画效果变化的目的。

例子

const graph = new G6.Graph({
  // ...                      // 其他配置项
  animate: true, // Boolean,可选,全局变化时否使用动画过度
});

元素动画

G6 允许用户通过自定义节点/边的方式,给元素增加动画效果,如下:

G6 图可视化引擎——入门教程——动画_第1张图片
G6 图可视化引擎——入门教程——动画_第2张图片

你可能感兴趣的:(#,G6,图可视化引擎)