css - GPU 加速的 CSS 动画与 SVG 原生动画

Question

我的问题是，什么是更快的原生 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 原生动画？

干杯!

Answer 1

当我在我的多平台 Phonegap 应用程序上遇到性能问题并使事情简单化时，我就这个主题做了很多阅读:

No one really knows which CSS are universally hardware accelerated as standards implementation is fragmented, it looks like iOS is leader in CSS HW acceleration but do you want to limit optimal experience to that market share?

最终我遇到了this文章试图解释 JS 解决方案具有更好的兼容性和 performance .同时添加 CSS 无法实现的功能。请记住，这两篇文章都是由 GSAP 的创建者撰写的，因此存在偏见，但在简单地尝试之后，我被说服了。

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