GPU加速CSS动画与SVG原生动画

问题描述 投票:14回答:4

我的问题是,什么是更快的原生SVG动画标签,例如:

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

或CSS动画,例如:

path {
    animation: foo 3s ease-out infinite;
}

@keyframes foo {
    50% {
        transform: rotate(360);
}

也许最好使用SVG动画,因为SVG有更好的浏览器支持?

另外相关:由于CSS转换触发硬件加速,我也想知道原生SVG动画标签是否也触发GPU加速或是由浏览器绘制。如果没有,是否可以强制硬件加载SVG原生动画?

干杯!

css animation svg hardware-acceleration
4个回答
0
投票

目前,它似乎不是关于这个主题的完整答案。

我环顾四周寻找更多信息,答案通常取决于您使用SVG(嵌入,内联)和您选择支持的浏览器的实现。

作为一般规则,浏览器的开发人员倾向于将他们的工作集中在CSS3优化而不是SVG优化,因为更频繁地使用第一个。

在这个简单的Wikipedia page中,您可以找到一些关于当前状态的示例和其他详细信息,而Mozilla developer center上的这个页面突出显示了由于使用CSS transform而由GPU加速的转换的不同性能。


0
投票

我在这个主题上做了很多阅读,因为我在我的多平台Phonegap应用程序上遇到了性能问题并且保持简单:

没有人真正知道哪些CSS是普遍的硬件加速,因为标准实现是碎片化的,看起来iOS是CSS硬件加速的领导者,但你想限制market share的最佳体验吗?

最后我遇到了this文章,该文章试图解释JS解决方案具有更好的兼容性和performance。虽然添加的功能简直是CSS无法实现的。请记住,这两篇文章都是由GSAP的创建者编写的,因而有偏见,但在简单地尝试之后,我确信。

可以找到上述文章的更精细版本here


0
投票

正如其他人指出的那样,性能取决于执行软件。尽管如此,知道(正如JGM.io写的)JS动画被认为提供比CSS3动画更高的性能可能会有所帮助。

除了GSAP,还有一个名为velocity.js的动画库,它支持SVG动画。下面的文章简要介绍了使用velocity.js的SVG动画以及为什么它比替代https://davidwalsh.name/svg-animation(由velocity.js的创建者Julian Shapiro编写)更好。

因此,如果您的目标是在浏览器/ webview / e中获得最大性能和兼容性,我建议您使用像velocity.js这样的js动画库。但也要考虑性能不是这种选择的唯一指标。到目前为止,我对velocity.js有一个非常积极的经验,但通过选择一个库,你的工作将始终依赖于它。


0
投票

截至2019年,情况仍不明朗。

在所有情况下,表演都有很大变化。

在高负载下,在避免接口滞后的同时,在大量使用javascript引擎时,我发现SVG在加载和渲染时比css动画更快,并且在调整窗口大小或缩放时实际上是响应时间的一级。也反对js动画画布。

这是本机动画svg和js动画svg的情况。

这实际上取决于设备。

无论哪种方式,所有这些都不是固定的。正如我在Linux上的开发一样,我发现我的应用程序在同类型的其他机器上运行更顺畅。

这有一个令人遗憾的解释,仍然在Linux / Firefox 66中默认禁用GPU加速。通过在about:config中启用,性能增加到另一个世界,用于渲染和cpu使用。

在about:config中,切换为以下条目为true:

启用layers.acceleration.force -

不确定为什么默认禁用它,可能只是许可证问题。这显示了未来改进的剩余空间。

https://community.chakralinux.org/t/how-to-enable-opengl-compositing-in-firefox-for-a-smoother-browsing-experience-with-less-cpu-usage/7543

对于Linux / chromium,默认情况下也会禁用此功能,这需要启用大量操作:

https://www.linuxuprising.com/2018/08/how-to-enable-hardware-accelerated.html

© www.soinside.com 2019 - 2024. All rights reserved.