与时俱进！AntV X6构建客户旅程时光轴组件：动画篇

2023-12-22 18:32:41

AntV X6 客户旅程时光轴组件的动画进阶指南

在现代商业环境中，客户旅程已成为企业提高客户满意度和留存率的关键。为了可视化和分析客户旅程，AntV X6 提供了强大的客户旅程时光轴组件。本文将深入探讨 AntV X6 的动画功能，展示如何通过生动的动画效果增强用户体验。

1. 前进与倒退：双向行进的时光轴动画

时间是客户旅程中的重要因素。AntV X6 提供双向行进的时光轴动画，让用户可以轻松探索旅程的各个阶段。通过向前或向后移动时光轴，用户可以查看不同时间点的客户旅程状态。

// 代码示例：双向行进的时光轴动画
const timeline = new G6.Timeline({
  container: 'mountNode',
  width: 800,
  height: 600,
  data: data,
  modes: ['time'],
  animate: true,
  on: {
    frame: (e) => {
      console.log(e.detail.timestamp);
    },
  },
});
timeline.play();

2. 元素飞入飞出：点亮关键事件

为了强调客户旅程中的关键事件，AntV X6 提供元素飞入飞出动画。当用户点击事件时，它将从画布外飞入，伴随着放大效果，吸引用户注意力。当鼠标移开时，事件将飞出画布消失。

// 代码示例：元素飞入飞出动画
const timeline = new G6.Timeline({
  container: 'mountNode',
  width: 800,
  height: 600,
  data: data,
  modes: ['time'],
  animate: true,
  on: {
    itemclick: (e) => {
      const item = e.detail.item;
      item.animate({
        onFrame: (ratio) => {
          item.attr({
            opacity: ratio,
            scale: [1 + ratio * 0.2, 1 + ratio * 0.2],
          });
        },
        repeat: false,
      });
    },
  },
});

3. 线条变化：展现发展脉络

在客户旅程时光轴中，线条通常表示客户不同阶段之间的关系。AntV X6 提供线条变化动画，让线条在不同状态之间平滑过渡，展现旅程的发展脉络。例如，任务完成时，连接它的线条会变成绿色。

// 代码示例：线条变化动画
const timeline = new G6.Timeline({
  container: 'mountNode',
  width: 800,
  height: 600,
  data: data,
  modes: ['time'],
  animate: true,
  on: {
    itemclick: (e) => {
      const item = e.detail.item;
      if (item.getModel().type === 'task') {
        item.animate({
          onFrame: (ratio) => {
            item.attr({
              lineStyle: {
                stroke: `rgb(${255 - ratio * 255}, ${ratio * 255}, 0)`,
              },
            });
          },
          repeat: false,
        });
      }
    },
  },
});