【文档BUG】线的动画示例代码不对 #4670

问题描述

通过官方文档，查看线动画示例代码实现

重现链接

https://codesandbox.io/s/ftf7ii

重现步骤

通过示例代码编写，线没有动画效果 https://g6-v3-2.antv.vision/en/examples/scatter/edge

import G6 from '@antv/g6';
G6.registerEdge('circle-running', {
  afterDraw(cfg, group) {
    // 获得当前边的第一个图形，这里是边本身的 path
    const shape = group.get('children')[0];
    // 边 path 的起点位置
    const startPoint = shape.getPoint(0);

    // 添加红色 circle 图形
    const circle = group.addShape('circle', {
      attrs: {
        x: startPoint.x,
        y: startPoint.y,
        fill: '#1890ff',
        r: 3
      }
    });

    // 对红色圆点添加动画
    circle.animate({
      // 动画重复
      repeat: true,
      // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
      onFrame(ratio) {
        // 根据比例值，获得在边 path 上对应比例的位置。
        const tmpPoint = shape.getPoint(ratio);
        // 返回需要变化的参数集，这里返回了位置 x 和 y
        return {
          x: tmpPoint.x,
          y: tmpPoint.y
        };
      }
    }, 3000); // 一次动画的时间长度
  }
}, 'cubic');  // 该自定义边继承内置三阶贝塞尔曲线 cubic

const data = {
  nodes: [{
    id: 'node1',
    x: 100,
    y: 100,
    label: '节点1',
    labelCfg: {
      position: 'top'
    }
  }, {
    id: 'node2',
    x: 300,
    y: 200,
    color: '#40a9ff',
    label: '节点2',
    labelCfg: {
      position: 'left',
      offset: 10
    }
  }],
  edges: [{
    source: 'node1',
    target: 'node2'
  }
  ]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    size: 45,
    style: {
      fill: '#DEE9FF',
      stroke: '#5B8FF9'
    }
  },
  defaultEdge: {
-    shape: 'circle-running',
+   type: 'circle-running',
    style: {
      lineWidth: 2,
      stroke: '#bae7ff'
    }
  }
});
graph.data(data);
graph.render();

预期行为

按照官方文档线有动画

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome
• G6 版本: 4.8.7

屏幕截图或视频（可选）

No response

补充说明（可选）

No response