如何在不占用大量CPU的情况下为SVG路径上的无限标记运动设置动画? [英] How can I animate infinite marker movement down an SVG path without very high CPU usage?

问题描述

我希望在我的D3图的链接上实现流量指示器，例如此区块

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

我读到您可以通过包含某些CSS属性来诱使某些浏览器触发GPU加速，但是其他消息来源表明这不再起作用，并且在添加transform: translateZ(0);时我当然看不到任何好处(例如).

我一直在研究其他选项，并且尝试在此样式.因为只有一种标记的性能更好，但是当我添加多种标记时，性能却更差.

是否还有另一个性能更高的选项可以使标记沿着SVG路径动画?

采用另一种方法失败后，我将尝试添加控件以停止/启动动画，但这将是最后的选择.

提前谢谢！

解决方案

为stroke-dashoffset属性设置动画似乎确实引起了很多计算.原始示例在Firefox中打开时导致CPU使用率约为50％.

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

http://bl.ocks.org/kmandov/raw/a87de2dd49a21be9f95c/

这是我更新偏移量的方法:

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

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

我知道它看起来不太好，但是(出乎意料的是)它的性能要比依靠CSS动画或过渡效果好得多.在Firefox中，我现在获得约15％的CPU使用率.

我可以想象，如果链接很多，这种方法将无法很好地执行，因为更新将花费很长时间.但这对于一些简单的用例来说是可行的，因为您可以线性地对固定数量的链接进行动画处理.

I wish to implement flow indicators on the links of my D3 graph, as in this block.

The block uses stroke-dashoffset keyframe CSS animation to achieve the flow, and while it looks good, CPU usage sits at almost 100.

I read that you can trick some browsers into triggering GPU acceleration by including certain CSS properties, but other sources indicated that this no longer works, and certainly I couldn't see any benefit when trying to add transform: translateZ(0); (for example).

I have been investigating other options, and I tried to implement a moving marker along a line, in this style. For only one marker performance is better, but when I added multiple performance was worse.

Is there another, more performant option for animating a marker down an SVG path?

Failing another approach, I will try adding controls to stop / start the animation, but that would be a last resort.

Thanks in advance!

解决方案

It seems indeed that animating the stroke-dashoffset attribute causes a lot of calculations. The original example causes a CPU usage at around 50% when I open it in Firefox.

There's another approach that seems to give better results: manually increment the stroke-dashoffset and loop that using setInterval. Here's a proof of concept:

http://bl.ocks.org/kmandov/raw/a87de2dd49a21be9f95c/

Here's how I update the dashoffset:

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

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

I know that it doesn't look very good but it (surprisingly) performs a lot better than relying on css animations or transitions. In Firefox I now get CPU usage at about 15%.

I can imagine that this approach won't perform very well if you have a lot of links, because the update will take too long. But maybe it's a viable hack for simpler use cases where you animate linearly a fixed amount of links.

这篇关于如何在不占用大量CPU的情况下为SVG路径上的无限标记运动设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！