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

文章讲述了如何在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
          }
        }
评论 16
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值