动画总览 | G6 图可视化引擎

概述

动画是指元素在一段时间内的状态变化，例如节点的位置、大小、颜色等。在 G6 中，动画通常用于增强用户体验，提升图更新过程的连贯性和流畅度。

G6 提供了一套动画范式来描述元素动画，并内置了一些常用的动画效果，用户可以通过配置动画参数来实现不同的动画效果。

一个动画范式的实现如下：

[
  {
    fields: ['x', 'y'],
  },
];

上述动画范式表示当元素的 x 和 y 属性发生变化时，会执行动画。

配置动画

G6 中动画配置分为全局配置和局部配置，全局配置主要用于配置全局是否开启动画、动画时长等参数，局部配置主要用于配置元素的动画效果。

关闭全局动画

若要关闭全局动画，可以在实例化 Graph 时传入 animation 配置项：

{
  animation: false,
}

配置全局动画

如果要启用动画且同时配置动画的默认播放时长，可以传入 animation 配置项：

{
  animation: {
    duration: 500,
  },
}

配置元素动画

对于单个元素，可以配置其在不同阶段的动画。例如希望元素在进场和退场时具有淡入淡出效果，可以以如下方式配置：

{
  node: {
    animation: {
      enter: 'fade',
      exit: 'fade'
    }
  }
}

如果希望更新元素位置时是以平移过渡的方式，可以配置如下：

{
  node: {
    animation: {
      update: 'translate',
    }
  }
}

如果希望关闭元素的动画，可以配置如下：

{
  node: {
    animation: false,
  }
}

动画范式

上一节中提到的动画配置实际上使用了内置的动画范式，本节介绍如何自定义动画范式。

提示

在编写动画范式之前需要了解元素的组成结构，具体请参考元素一节

元素一节中提到：G6 中的元素是由一个或多个原子图形组合而成。因此元素的动画本质上是这些原子图形动画的组合。

因此动画范式是一个数组，用于描述元素中各原子图形的动画效果。对于元素本身来说，其也是一个特殊的复合图形，因此具有基本的图形属性，如 x、y 等。

因此可以直接为元素本身编写动画范式：

[
  {
    fields: ['x', 'y'],
  },
];

自定义动画

如果内置动画无法满足需求，可以自定义动画，具体请参考自定义动画。

动画优先级

动画优先级是指全局动画配置和元素动画配置之前的优先级，可以归纳如下：

全局动画配置	局部动画配置	是否执行动画
✅ true	✅ true	✅ 执行动画，以默认动画配置执行
✅ true	❌ false	❌ 不执行该类元素动画
✅ true	✅ 配置动画	✅ 执行动画，以局部动画配置执行
❌ false	✅ true	❌ 不执行任何动画
❌ false	❌ false	❌ 不执行任何动画
❌ false	✅ 配置动画	❌ 不执行任何动画
✅ 配置动画	✅ true	✅ 执行动画，以全局动画配置执行
✅ 配置动画	✅ 配置动画	✅ 执行动画，将局部动画配置覆盖全局动画配置后执行
✅ 配置动画	❌ false	❌ 不执行该类元素动画

持续动画

如果希望元素具有持续动画，例如节点的波动效果、边的蚂蚁线效果等，可以通过自定义元素方式实现，下面提供一个具有蚂蚁线(Ant Line)动画的边的实现：

import { Line } from '@antv/g6';

class AntLine extends Line {
  onCreate() {
    this.shapeMap.key.animate([{ lineDashOffset: -20 }, { lineDashOffset: 0 }], {
      duration: 500,
      iterations: Infinity,
    });
  }
}

其中 onCreate 是一个生命周期钩子，用于在元素创建时执行动画。

在 options 中配置边样式：

{
  edge: {
    type: 'ant-line',
    style:{
      lineDash: [10, 10]
    }
  }
}

(() => {
  const { register, Line, Graph } = window.g6;

  class AntLine extends Line {
    onCreate() {
      this.shapeMap.key.animate([{ lineDashOffset: 20 }, { lineDashOffset: 0 }], {
        duration: 500,
        iterations: Infinity,
      });
    }
  }

  register('edge', 'ant-line', AntLine);

  const container = createContainer({ width: 200, height: 50 });

  const graph = new Graph({
    container,
    width: 200,
    height: 50,
    data: {
      nodes: [
        { id: 'node-1', style: { x: 25, y: 25 } },
        { id: 'node-2', style: { x: 175, y: 25 } },
      ],
      edges: [{ source: 'node-1', target: 'node-2', style: { lineDash: [10, 10] } }],
    },
    edge: {
      type: 'ant-line',
    },
  });

  graph.draw();

  return container;
})();

其中 lineDash 是 lineDashOffset 的数组，通过不断变化 lineDashOffset 来实现飞线效果。

同样的，还可以实现节点的呼吸效果：

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {}
}

其中 lineDashOffset 是 lineDash 的偏移量，通过不断变化 lineDashOffset 来实现飞线效果。

同样的，还可以实现节点的呼吸效果：

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {
    this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
      duration: 1000,
      iterations: Infinity,
      direction: 'alternate',
    });
  }
}

节点样式配置：

{
  node: {
    type: 'breathing-circle',
    style: {
      halo: true,
      haloLineWidth: 5,
    },
  },
}

(() => {
  const { register, Circle, Graph } = window.g6;

  class BreathingCircle extends Circle {
    onCreate() {
      this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
        duration: 1000,
        iterations: Infinity,
        direction: 'alternate',
      });
    }
  }

  register('node', 'breathing-circle', BreathingCircle);

  const container = createContainer({ width: 50, height: 50 });

  const graph = new Graph({
    container,
    width: 50,
    height: 50,
    data: {
      nodes: [{ id: 'node-1', style: { x: 25, y: 25 } }],
    },
    node: {
      type: 'breathing-circle',
      style: {
        halo: true,
        haloLineWidth: 5,
      },
    },
  });

  graph.draw();

  return container;
})();

概述

动画是指元素在一段时间内的状态变化，例如节点的位置、大小、颜色等。在 G6 中，动画通常用于增强用户体验，提升图更新过程的连贯性和流畅度。

G6 提供了一套动画范式来描述元素动画，并内置了一些常用的动画效果，用户可以通过配置动画参数来实现不同的动画效果。

一个动画范式的实现如下：

[
  {
    fields: ['x', 'y'],
  },
];

上述动画范式表示当元素的 x 和 y 属性发生变化时，会执行动画。

配置动画

G6 中动画配置分为全局配置和局部配置，全局配置主要用于配置全局是否开启动画、动画时长等参数，局部配置主要用于配置元素的动画效果。

关闭全局动画

若要关闭全局动画，可以在实例化 Graph 时传入 animation 配置项：

{
  animation: false,
}

配置全局动画

如果要启用动画且同时配置动画的默认播放时长，可以传入 animation 配置项：

{
  animation: {
    duration: 500,
  },
}

配置元素动画

对于单个元素，可以配置其在不同阶段的动画。例如希望元素在进场和退场时具有淡入淡出效果，可以以如下方式配置：

{
  node: {
    animation: {
      enter: 'fade',
      exit: 'fade'
    }
  }
}

如果希望更新元素位置时是以平移过渡的方式，可以配置如下：

{
  node: {
    animation: {
      update: 'translate',
    }
  }
}

如果希望关闭元素的动画，可以配置如下：

{
  node: {
    animation: false,
  }
}

动画范式

上一节中提到的动画配置实际上使用了内置的动画范式，本节介绍如何自定义动画范式。

提示

在编写动画范式之前需要了解元素的组成结构，具体请参考元素一节

元素一节中提到：G6 中的元素是由一个或多个原子图形组合而成。因此元素的动画本质上是这些原子图形动画的组合。

因此可以直接为元素本身编写动画范式：

[
  {
    fields: ['x', 'y'],
  },
];

自定义动画

如果内置动画无法满足需求，可以自定义动画，具体请参考自定义动画。

动画优先级

动画优先级是指全局动画配置和元素动画配置之前的优先级，可以归纳如下：

全局动画配置	局部动画配置	是否执行动画
✅ true	✅ true	✅ 执行动画，以默认动画配置执行
✅ true	❌ false	❌ 不执行该类元素动画
✅ true	✅ 配置动画	✅ 执行动画，以局部动画配置执行
❌ false	✅ true	❌ 不执行任何动画
❌ false	❌ false	❌ 不执行任何动画
❌ false	✅ 配置动画	❌ 不执行任何动画
✅ 配置动画	✅ true	✅ 执行动画，以全局动画配置执行
✅ 配置动画	✅ 配置动画	✅ 执行动画，将局部动画配置覆盖全局动画配置后执行
✅ 配置动画	❌ false	❌ 不执行该类元素动画

持续动画

import { Line } from '@antv/g6';

class AntLine extends Line {
  onCreate() {
    this.shapeMap.key.animate([{ lineDashOffset: -20 }, { lineDashOffset: 0 }], {
      duration: 500,
      iterations: Infinity,
    });
  }
}

其中 onCreate 是一个生命周期钩子，用于在元素创建时执行动画。

在 options 中配置边样式：

{
  edge: {
    type: 'ant-line',
    style:{
      lineDash: [10, 10]
    }
  }
}

(() => {
  const { register, Line, Graph } = window.g6;

  class AntLine extends Line {
    onCreate() {
      this.shapeMap.key.animate([{ lineDashOffset: 20 }, { lineDashOffset: 0 }], {
        duration: 500,
        iterations: Infinity,
      });
    }
  }

  register('edge', 'ant-line', AntLine);

  const container = createContainer({ width: 200, height: 50 });

  const graph = new Graph({
    container,
    width: 200,
    height: 50,
    data: {
      nodes: [
        { id: 'node-1', style: { x: 25, y: 25 } },
        { id: 'node-2', style: { x: 175, y: 25 } },
      ],
      edges: [{ source: 'node-1', target: 'node-2', style: { lineDash: [10, 10] } }],
    },
    edge: {
      type: 'ant-line',
    },
  });

  graph.draw();

  return container;
})();

其中 lineDash 是 lineDashOffset 的数组，通过不断变化 lineDashOffset 来实现飞线效果。

同样的，还可以实现节点的呼吸效果：

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {}
}

其中 lineDashOffset 是 lineDash 的偏移量，通过不断变化 lineDashOffset 来实现飞线效果。

同样的，还可以实现节点的呼吸效果：

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {
    this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
      duration: 1000,
      iterations: Infinity,
      direction: 'alternate',
    });
  }
}

节点样式配置：

{
  node: {
    type: 'breathing-circle',
    style: {
      halo: true,
      haloLineWidth: 5,
    },
  },
}

(() => {
  const { register, Circle, Graph } = window.g6;

  class BreathingCircle extends Circle {
    onCreate() {
      this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
        duration: 1000,
        iterations: Infinity,
        direction: 'alternate',
      });
    }
  }

  register('node', 'breathing-circle', BreathingCircle);

  const container = createContainer({ width: 50, height: 50 });

  const graph = new Graph({
    container,
    width: 50,
    height: 50,
    data: {
      nodes: [{ id: 'node-1', style: { x: 25, y: 25 } }],
    },
    node: {
      type: 'breathing-circle',
      style: {
        halo: true,
        haloLineWidth: 5,
      },
    },
  });

  graph.draw();

  return container;
})();