使用antv X6实现两点之间连线上圆点匀速移动的完整代码

• 首先vue我使用的是vue3的写法，然后X6使用的1.31.0版本
• 确保vue版本正确，x6安装好，直接复制过去就能看到效果

• <template>
      <div class="app">
          <div id="container" class="area-center-container" />
      </div>
  </template>
  <script>
  import { defineComponent, onMounted } from 'vue';
  import { Graph, Timing } from "@antv/x6";
  
  export default defineComponent({
      setup() {
          let graph = null;
          const initGraph = () => {
              graph = new Graph({
                  container: document.getElementById('container'),
                  background: {
                      color: "#44546c"
                  },
                  connecting: {
                      allowBlank: true,
                  },
                  mousewheel: true,
                  panning: true,
                  grid: {
                      size: 10, 
                      visible: true 
                  },
                  snapline: {
                      enabled: true,
                      sharp: true
                  },
                  scroller: {
                      enabled: false,
                      pageVisible: false,
                      pageBreak: false,
                      pannable: false
                  },
              })
             
              const ball = graph.addNode({
                  shape: 'circle',
                  id: 'node999',
                  x: 0,
                  y: 40,
                  width: 60,
                  height: 60,
                  attrs: {
                      label: {
                          text: 'ball',
                          fontSize: 20
                      },
                      body: {
                          fill: '#FFFFFF',
                      }
                  },
              })
              const ball1 = graph.addNode({
                  shape: 'circle',
                  id: 'node1000',
                  x: 1000,
                  y: 40,
                  width: 60,
                  height: 60,
                  attrs: {
                      label: {
                          text: 'ball',
                          fontSize: 20
                      },
                      body: {
                          fill: '#FFFFFF',
                      }
                  },
              })
              const edge = graph.addEdge({
                  shape: 'edge', 
                  id: '1001',
                  source: ball,
                  target: ball1,
              })
  
              let edge1 = graph.getCellById('1001')
              let markup = edge1.getMarkup()
  
              markup.push({
                  tagName: 'circle',
                  selector: 'circle'
              })
              edge1.setMarkup(markup) 
              let attrOption = {
                  circle: {
                      r: 5,
                      fill: '#00FFFF',
                      atConnectionRatio: 0,
                      refCy: -10 
                  }
              }
              let options1 = {
                  delay: 0, 
                  duration: 3000, 
                  timing: Timing.linear, 
                  complete: () => {
                      edge1.setAttrs(attrOption) 
                      edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
                  }, 
              }
              edge1.setAttrs(attrOption)
              edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
          };
          onMounted(() => {
              initGraph()
          });
          return {
              initGraph
          }
      },
  });
  </script>
  <style sccoped>
  body {
      padding: 0;
      margin: 0;
  }
  
  .app {
      height: 100vh;
      width: 100vw;
      display: flex;
  }
  
  #container {
      flex: 1;
  }
  </style>