如何让这个图标自动旋转

[code-lixm]

开始loading 我是使用的一个动态的svg，他在svg render模式下能够直接动起来，但是随之引来的问题是，拖动画布的过程中，会选择svg节点中的文字，体验不好。

于是就换成了canvas渲染，但是参照 shapeMap.animate方法，设置了transform，虽然可以旋转了，但是animate 会把自身渲染的matrix偏移覆盖掉，导致loading的按钮位置不对，应该怎么计算matrix，或者有更好的办法么。

[petercat-assistant[bot]]

在使用 G6 的 canvas 渲染模式下，如果你想让图标自动旋转并且避免 animate 方法覆盖自身渲染的 matrix 偏移，可以尝试以下方法：

1. 手动计算旋转矩阵：在每次动画帧中，手动计算旋转矩阵并应用到节点上，而不是依赖于 animate 方法的自动计算。这样可以确保你对矩阵的控制。

2. 使用 requestAnimationFrame：通过 JavaScript 的 requestAnimationFrame 方法来实现动画，这样可以在每一帧中手动更新节点的 transform 属性。

3. 保存初始矩阵：在动画开始之前，保存节点的初始矩阵。在每次更新动画时，先应用初始矩阵，然后再应用旋转矩阵。

4. 避免文字选择：如果在拖动过程中会选择到 SVG 节点中的文字，可以通过 CSS 来避免，例如：

   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

以下是一个简单的示例代码，展示如何使用 requestAnimationFrame 来实现旋转动画：

function rotateNode(node, angle) {
  const matrix = node.getMatrix();
  const radian = (Math.PI / 180) * angle;
  const cos = Math.cos(radian);
  const sin = Math.sin(radian);

  // 计算旋转矩阵
  const rotateMatrix = [
    cos, -sin, 0,
    sin, cos, 0,
    0, 0, 1
  ];

  // 应用旋转矩阵
  node.setMatrix(G6.Util.mat3.multiply([], matrix, rotateMatrix));
}

function animateRotation(node) {
  let angle = 0;
  function animate() {
    angle = (angle + 1) % 360; // 每帧增加1度
    rotateNode(node, angle);
    requestAnimationFrame(animate);
  }
  animate();
}

// 假设 node 是你要旋转的节点
animateRotation(node);

这种方法可以让你更精确地控制节点的旋转动画，同时避免 animate 方法覆盖矩阵的问题。

如果你有进一步的问题或需要更详细的帮助，请随时告诉我！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[code-lixm]

找到了一个方法，获取元素的transform，在后面拼接属性
const icon = this.shapeMap?.['status-icon'];
const transform = icon?.getAttribute('transform') as string;
icon.animate([{ transform: transform + ' rotate(0deg)' }, { transform: transform + ' rotate(360deg)' }], {
duration: 1000,
iterations: Infinity,
easing: 'linear',
});