antv x6 沿边图标循环动画实现

实现效果，如下图，边上存在两个图标，要求图标延边一直循环动画

实现方法：
1.注册一个自定义边，边上定义两个图标，并设置其初始位置

2.使用transition给边设置动画,利用complte方法实现循环动画

补充代码：
1.注册边的代码

Graph.registerEdge(
  'arrow-edge',
  {
    markup: [
      {
        tagName: 'path',
        selector: 'wrap',
        attrs: {
          fill: 'none',
          cursor: 'pointer'
          // stroke: '#ff0000'
        }
      },
      {
        tagName: 'path',
        selector: 'line',
        attrs: {
          fill: 'none',
          'pointer-events': 'none'
        }
      },
      {
        tagName: 'path',
        groupSelector: 'arrow',
        selector: 'arrow1'
      },
      {
        tagName: 'path',
        groupSelector: 'arrow',
        selector: 'arrow2'
      }
    ],
    attrs: {
      wrap: {
        connection: true,
        strokeWidth: 10,
        strokeLinejoin: 'round',
        style: {
          animation: 'animation-line 30s infinite linear'
        }
      },
      line: {
        connection: true,
        stroke: '#7eb2fb',
        strokeLinejoin: 'round',
        targetMarker: 'classic',
        style: {
          // animation: 'animation-line 30s infinite linear'
        }
      },
      arrow: {
        // d: 'M 0 2 2 1 4 0 2 -1 0 -2 -14 -1 -14 0 -14 1 z',
        d: 'M 0 2 2 1 Q4 0 2 -1 0 -2 -24 -1 -24 0 -24 1 z',
        fill: {
          type: 'linearGradient',
          stops: [
            { offset: '0%', color: 'rgba(73, 131, 236,0.7)' },
            { offset: '30%', color: '#4983EC' },
            { offset: '100%', color: '#FFFFFF' }
          ]
        },
        filter: {
          name: 'dropShadow',
          args: {
            color: '#4983EC',
            dx: 0,
            dy: 0,
            blur: 2,
            opacity: 0.7
          }
        },
        stroke: 'none',
        pointerEvents: 'none',
        style: {
          boxShadow: '0px 0px 10px 1px #002DFF'
        }
      },
      arrow1: {
        // atConnectionRatio: 将边中的指定元素移动到指定比例 [0, 1] 位置处，并自动旋转元素，
        // 使其方向与所在位置边的斜率保持一致。
        atConnectionRatio: 0.25
      },
      arrow2: {
        atConnectionRatio: 0.5
      }

    },

    // connector: { name: 'smooth' },
    zIndex: 0

  },
  true
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

2.动画代码：

import { Timing } from '@antv/x6'
//核心代码
edges.forEach((edge) => {
   const options = {
     delay: 0,
     duration: 8000,
     timing: Timing.linear,
     complete: (p) => {
       const attr = p.path.includes('arrow1') ? 'arrow1' : 'arrow2'
       edge.updateAttrs({
         [attr]: { atConnectionRatio: 0 }
       }, { silent: true })
       edge.transition(p.path, 1, options)
     }
   }
   edge.transition('attrs/arrow1/atConnectionRatio', 1, options)
   // 两个图标第一次需要在不同时间结束后面才能以相同速度动画。
   edge.transition('attrs/arrow2/atConnectionRatio', 1, { ...options, duration: 6000 })
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19