如何在没有非常高的 CPU 使用率的情况下为 SVG 路径上的无限标记移动设置动画？

Question

我希望在我的 D3 图表的链接上实现流量指示器，就像在这个块中一样。

该块使用 stroke-dashoffset 关键帧 CSS 动画来实现流程，虽然看起来不错，但 CPU 使用率接近 100。

我读到您可以通过包含某些 CSS 属性来诱使某些浏览器触发 GPU 加速，但其他来源表明这不再有效，当然我在尝试添加时看不到任何好处transform: translateZ(0);（例如）。

我一直在研究其他选项，并尝试以这种方式沿线实现移动标记。只有一个标记性能更好，但是当我添加多个标记时性能更差。

是否有另一个更高效的选项可以沿着 SVG 路径设置标记动画？

如果另一种方法失败，我将尝试添加控件来停止/开始动画，但这将是最后的手段。

提前致谢！

Answer 1

似乎确实为stroke-dashoffset属性设置动画会导致大量计算。当我在 Firefox 中打开它时，原始示例导致 CPU 使用率约为 50%。

还有另一种方法似乎可以提供更好的结果：手动增加stroke-dashoffset使用setInterval. 这是一个概念证明：

这是我更新 dashoffset 的方法：

var lines = d3.selectAll('.flowline');

var offset = 1; 
setInterval(function() {
  lines.style('stroke-dashoffset', offset);
  offset += 1; 
}, 50);

我知道它看起来不太好，但它（令人惊讶地）比依赖 css 动画或过渡效果要好得多。在 Firefox 中，我现在的 CPU 使用率约为 15%。

我可以想象，如果你有很多链接，这种方法不会表现得很好，因为更新会花费太长时间。但对于更简单的用例来说，它可能是一个可行的技巧，在这种情况下，您可以线性地为固定数量的链接设置动画。