动画

配置动画

全局动画: 图整体变化时的动画, 触发切换布局时触发(如 graph.updateLayout(cfg)、graph.changeData(data))
元素动画: 具体到元素上的动画, 需要复写 afterDraw 手动实现, 参见文档

type Easing =
  | "easeLinear"
  | "easePolyIn"
  | "easePolyOut"
  | "easePolyInOut"
  | "easeQuad"
  | "easeQuadIn"
  | "easeQuadOut"
  | "easeQuadInOut";

interface GraphAnimateConfig {
  duration: number; // 动画执行时间
  easing?: Easing; // 动画缓动效果
  delay?: number; // 动画执行的延迟时间
  repeat?: boolean; // 是否重复执行动画
  callback?: () => void; // 动画执行完时的回调函数
  pauseCallback?: () => void; // 动画暂停时的回调函数
  resumeCallback?: () => void; // 动画恢复(重新唤醒)时的回调函数
  // 回调函数，用于自定义节点运动路径。
  onFrame?: (
    item: Item,
    ratio: number,
    data?: GraphData,
    originAttrs?: ShapeStyle
  ) => unknown;
}

// 启用
const graph = new G6.Graph({
  // ...
  animate: true,
  animateCfg: {
    // ..
  },
});

动画 ​

配置动画 ​

动画

配置动画