我前一段时间写过一篇文章《「AntV」怎样用SVG & X6制作客户旅程时光轴》，分享了怎样通过使用SVG和X6制作客户旅程时光轴，得到了很多伙伴们的喜欢。

一些小伙伴找我要到了演示Demo的源代码，可是即使在有演示Demo源代码，在这基础之上再进行二次开发时却遇到了很多障碍。

软件/工具是知识和经验凝结的产物，在开发上遇到的很多障碍、往往是相关知识、开发经验或者能力方面有欠缺，所以我打算在演示Demo源代码基础之上，通过接下来的《「AntV X6」从0到1实现客户旅程时光轴组件》一系列文章，将我使用SVG和X6的相关知识和经验对大家进行分享，希望能帮到有同样需求的朋友。

《「AntV X6」从0到1实现客户旅程时光轴组件》会以系列文章的形式，有步骤、有重点地分享我使用AntV X6进行客户旅程时光轴组件实现相关的知识和经验，目前该系列文章会有如下6篇：

系列文章将会以“项目驱动”的方式进行技术知识和开发经验的分享，贯穿整个系列文章的客户旅程时光轴Demo如下：

回顾之前的文章，我们知道了一个客户旅程时光轴图由以下5个核心要素组成——

5个核心要素.png

点（节点，Node）：旅程图中那些一个个的圆圈，被称为“节点”；
边（连线，Edge）：两个节点中的连线，被称为“边”；
标签（Label）：节点下的说明文字，被称为“标签”；
布局（Layout）：各个节点位置坐标的排列，被称为“布局”；
动画（Animation）：在旅程时光轴图中，有一个从第一个节点一直到最后一个节点的描边动画。

以下是《「AntV X6」从0到1实现客户旅程时光轴组件06-动画篇》文章正文。

动画

在客户旅程时光轴组件中，我们使用到了两种动画，接下来我们分别进行讲解：

描边动画——应用在边上的动画，使得边就像是一点点绘制上去的动画效果；
沿边动画——应用在边上的动画，使得一个红点沿着边进行移动的动画效果。

描边动画

在SVG中，我们是通过使用stroke属性进行描边，描边动画就是使用了stroke-dasharray和stroke-dashoffset这两个属性的组合进行实现：

stroke-dasharray 表示虚线描边；
stroke-dashoffset 表示虚线的起始偏移。

如果stroke-dasharray和stroke-dashoffset的值都很大，超过了描边路径的总长度，然后给stroke-dashoffset添加一个animation设置，让它一点一点地恢复到0——就会看到一根实线一点点地出现，就好像使用画笔正在绘制上去似的：

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

张鑫旭写了一篇《纯CSS实现帅气的SVG路径描边动画效果》的文章，感兴趣的可以阅读一下。

在AntV X6中的沿边动画实现很简单，先把边的stroke-dasharray和stroke-dashoffset设置为边的长度：

graph.getEdges().forEach((edge) => {
  const view = graph.findViewByCell(edge) as EdgeView;
  // @ts-ignore
  const totalLength: number = view.selectors.line.getTotalLength();
  edge.attr('line/stroke-dasharray', totalLength);
  edge.attr('line/stroke-dashoffset', totalLength);
});

然后我们可以调用 cell.transition(...) 方法，来将stroke-dashoffset变为数值0，这样就实现了描边动画：

const totalLength: number = view.selectors.line.getTotalLength();
cell.transition('attrs/line/stroke-dashoffset', 0, {
  duration: (totalLength / 32) * 100,
});

沿边动画

我们可以调用 EdgeView 上的 sendToken(...) 方法来触发一个沿边运动的动画：

const token = Vector.create('circle', { r: 6, fill: 'green' });
view.sendToken(
  token.node,
  {
    duration: (totalLength / 32) * 100,
    timing: 'linear',
  },
  () => {
    if (target) {
      cell.attr('line/stroke-dasharray', 0);
      cell.attr('line/stroke-dashoffset', 0);
      graph.trigger('signal', target);
    }
  },
);

通过本系列文章，我们从“节点”、“连线”、“标签”、“布局”、“动画”这5个要素出发，通过结合下面的客户旅程时光轴图Demo案例，掌握了客户旅程时光轴组件开发时的知识重点和技术细节，希望能帮助到有需要的朋友：

「AntV X6」从0到1实现客户旅程时光轴组件06-动画篇

动画

描边动画

沿边动画

参考资料