性能不佳 - SVG 动画

Question

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

我正在屏幕上绘制 100 个圆圈。每个圆圈包含另外 6 个圆圈，总共 700 个圆圈在加载时呈现。

圆圈对 x 轴上的鼠标移动做出反应，并在 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;
});

如果其中 none 能够满足您的需求，我强烈建议您将每个 Dot 转换为纹理并直接通过 [=20= 绘制这些纹理] 或 WebGL 和图书馆。 Three.js will be able to render hundreds of thousands of these: http://threejs.org/examples/#webgl_particles_sprites 您将不得不重新考虑很多纹理本身的生成方式以及线条之间的不透明度如何变化，当然它会 看起来 与您描述的略有不同在你的问题中。位图不同于矢量>_<

希望对您有所帮助！

性能不佳 - SVG 动画

Poor performance - SVG animations

performance

animation

svg

two.js