性能不佳 - SVG动画

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

你做的很漂亮!

嗯,所以有很多因素可以解释为什么表演并不像你想的那样出色.

1. 可绘制区域的大小很重要(即:元素<svg />或<canvas />元素).区域越大,渲染的像素越多.
2. 的量的元素添加到DOM.是的,有100个点,但每个点由许多元素组成.
3. 在这些元素中,元素对任何给定帧的更改量.
4. 最后,该元素的改变有多少业务(即:opacity,scale,translation等)

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

• 减少形状的数量将使其运行更快^^
• 对于这样的事情Two.Types.canvas 可能是最快的.
• 而不是移动每个点分成translation2或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> _ <不同

希望这可以帮助!