求助：自定义节点动画问题 about g6 HOT 2 CLOSED

 const nodeWithLine = G6.registerNode(
        "custom-line-circle",
        {
          draw: (cfg, group) => {
            let r = cfg.size / 2;

            const keyShape = group.addShape("circle", {
              attrs: {
                zIndex: 1,
                r: r + 10,
                fill: null,
                stroke: cfg.fill || "red",
              },
              name: "outer-circle",
              draggable: true,
            });
            group.addShape("circle", {
              attrs: {
                zIndex: 1,
                r: r,
                fill: cfg.fill || "red",
                stroke: null,
              },
              name: "inner-circle",
              draggable: true,
            });

            if (cfg.label) {
              const label = group.addShape("text", {
                attr: {
                  zIndex: 2,
                  x: 0,
                  y: 0,
                  textAlign: "center",
                  textBaseline: "middle",
                  text: cfg.label,
                  fill: "#fff",
                },
                name: "text-shape",
                draggable: true,
              });
            }

            return keyShape;
          },
          // afterDraw(cfg, group) {
          //   let r = cfg.size / 2;
          //   if (isNaN(r)) {
          //     r = cfg.size[0] / 2;
          //   }
          //   // 第一个背景圆
          //   const back = group.addShape("circle", {
          //     attrs: {
          //       x: 0,
          //       y: 0,
          //       r: r + 5,
          //       fill: null,
          //       stroke: "red",
          //     },

          //     // must be assigned in G6 3.3 and later versions. it can be any value you want
          //     name: "circle-shape1",
          //   });
          // },
          setState(name, value, item) {
            const shape = item.get("keyShape");
            const r = item.getModel().size / 2;
            if (name === "hover") {
              if (value) {
                shape.animate(
                  {
                    r: r + 5,
                  },
                  {
                    repeat: false,
                    duration: 500,
                    easing: "easeLinear",
                    delay: 0, // 无延迟
                  }
                );
              } else {
                shape.animate(
                  {
                    r: r + 10,
                  },
                  {
                    repeat: false,
                    duration: 500,
                    easing: "easeLinear",
                    delay: 0, // 无延迟
                  }
                );
              }
            }
          },
        },
        "circle"
      );