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

原创

已于 2024-04-17 11:48:23 修改 · 3.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#antv x6 #动画

于 2023-10-25 14:55:09 首次发布

文章讲述了如何在AntVX6图形库中使用自定义边和图标，通过注册边缘并设置过渡动画，实现图标沿边的循环动画效果。代码涉及图形数据处理、动画延迟和完成回调，以及计算节点端口以确定动画路径。

实现效果，如下图，边上存在两个图标，要求图标延边一直循环动画
在这里插入图片描述
实现方法：
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
          }
        }