performance - 性能不佳 - SVG 动画

Question

所以我正在为客户创建一些动画，我一直在玩 two.js，因为我喜欢它的 SVG 功能。不幸的是，我遇到了性能问题。

我正在屏幕上绘制 100 个圆圈。每个圆圈包含 6 个其他圆圈，总共 700 个圆圈在加载时渲染。

圆圈对 x 轴上的鼠标移动使用react，并在 y 轴上缓慢向下级联。

目前在 Chrome 中它只能以 32FPS 左右的速度运行。在 Firefox 中，它几乎不起作用!

我也尝试过 two.js 的 webgl 渲染器，虽然性能略有提高，但元素看起来不如 SVG。

来源在此:https://github.com/ashmore11/verifyle/tree/develop

文件路径:src/coffee/elements/dots

如果我能提供更多信息，请告诉我。

Answer 1

你做的很漂亮!

嗯，所以有很多因素可以解释为什么性能没有你想要的那么出色。

尺寸可绘制区域的重要性(即: <svg /> 或 <canvas /> 元素)。区域越大，要渲染的像素越多。

金额添加到 DOM 的元素。是的，有 100 个点，但每个点都由许多元素组成。

这些元素的数量变化 一个元素在任何给定的框架上。

最后，元素变化了多少操作 (即: opacity 、 scale 、 translation 等)

这些考虑因素在大多数计算机生成的图像中都会影响实时渲染。目标基本上是减少任何一个维度上的负载，看看它是否足以为您提供所需的性能。你必须要有创意，但也有选择。以下是我可以尝试加快速度的一些想法:

减少形状的数量会使其运行得更快^^

对于这样的事情 Two.Types.canvas可能是最快的。

而不是移动每个点拆分 translation分成 2 或 3 组，并根据容器组移动它们。有点像前景和背景视差。

如果您坚持使用 Two.Types.svg尝试在任何给定帧上仅对少数点进行动画处理。这样一来，您就不会在每一帧都对整个场景进行完整的遍历，并且每个点也不会为每一帧设置动画。

用于此的伪代码可能如下所示:

// ... some array : dots inferred ... //

var now = Date.now();
var index, length = 12;

two.bind('update', function() {
  for (var i = index; i < Math.min(index + 12, dots.length); i++) {
    var dot = dots[i];
    dot.scale = (Math.sin(now / 100) + 1) / 4 + 0.75;
  }
  index = (index + 12) % dots.length;
});

如果这些都没有给你任何你正在寻找的实质性的东西，那么我强烈建议你上交每个 Dot进入纹理并直接通过 canvas2d 绘制这些纹理或与 WebGL和图书馆。 Three.js将能够渲染数十万个:http://threejs.org/examples/#webgl_particles_sprites您将不得不重新思考纹理本身的生成方式以及线条之间的不透明度如何变化，当然，正如您在问题中所描述的那样，它看起来会略有不同。位图不同于 Vector >_<

希望这可以帮助!