Question

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

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

圆圈对x轴上的鼠标移动作出反应，并在y轴上缓慢向下级联。

目前在Chrome中，它的运行速度仅为32FPS左右。在Firefox中它几乎不起作用！

我也尝试了两个.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或{ {1}}和一个图书馆。 Three.js将能够呈现成千上万的这些：http://threejs.org/examples/#webgl_particles_sprites您必须重新思考纹理本身的生成方式以及不透明度如何在线条之间变化，当然它和＃39; ll 看起来与您在问题中描述的略有不同。位图与Vector＆gt; _＆lt;

希望这有帮助！

性能不佳 - SVG动画

1 个答案: