所以我正在为客户创建一些动画,我一直在玩 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
如果我能提供更多信息,请告诉我。
最佳答案
你做的很漂亮!
嗯,所以有很多因素可以解释为什么性能没有你想要的那么出色。
<svg />
或 <canvas />
元素)。区域越大,要渲染的像素越多。 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 >_< 希望这可以帮助!
关于performance - 性能不佳 - SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32363714/