html - 为(移动)浏览器中的 CSS3 HW GPU 加速优化基于 SVG 的 Sprite 表

Question

在过去的一周里，我一直在帮助一位 friend 在浏览器中试验基于 SVG 的 Sprite 表。我们想提出一个理想的工作流程来在浏览器中准备、发布和运行高质量的动画图形。因此，理想情况下，拥有适用于小型智能手机屏幕、平板电脑、视网膜显示器和桌面浏览器的单一动画数据源。

理论上，(基于矢量的)SVG 应该是理想的选择，但由于 SVG 通常使用不多 - 我们决定对其进行测试。这个想法不是使用 SMIL SVG(因此没有基于 SVG 的动画)，而是创建一个动画 Sprite 表(就像您通常使用光栅数据 PNG/JPG 那样)，但是使用纯矢量(即 SVG)来做到这一点。它有点大，但如果它能这样工作——它甚至可以使用更优化的东西。

此外，逐帧矢量动画可以为我们的工作流程做很多事情 - 它允许我们使用 Flash 编辑器制作动画，然后将它们导出到 SVG Sprite 表。

无论如何，结果出奇地好，但在某些方面也失败了(请注意，出于测试目的，我们只使用基于 Webkit 的浏览器，即 Safari、Chrome、iOS 上的移动 Safari 和 Android ICS ).

在 CSS 中，很容易为像这样的 Sprite 表触发硬件加速(至少在具有关键帧和步骤的现代浏览器中)——您只需这样做:

background-image: url(my.svg);
-webkit-animation: walk 1s steps(12, end) infinite; 

调用此处显示的基于关键帧的动画:

@-webkit-keyframes walk {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }          
}

translate3d 的使用应该让 GPU 发挥作用，整个事情应该在 iOS 移动 Safari 和 Android ICS 浏览器中进行硬件加速。

考虑到它是一种蛮力技术和相当大的矢量动画(测试为 600x600 像素)，令人惊讶的是 - 整个过程都很顺利。但它并不完美——它在起飞前会在 Safari 中闪烁。在 ICS 浏览器中，它一直在闪烁，所以它不是真正可用的。

所以我们尝试了常用的技巧来消除闪烁，例如:

-webkit-transform: translateZ(0);    
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

但这没有用。因此，我们尝试在内存中动态光栅化 SVG，并使用 -webkit-transform: scale3d(1, 1, 0) 将其用作纹理，但这并没有帮助以太。

最后，我们只是用相同大小的渲染出的 PNG/JPG Sprite 表替换了 SVG，认为复杂的矢量对于浏览器来说太多了——但你猜怎么着？这是同样的问题 - 所以它根本不是 SVG 渲染 - 它是一个浏览器绘图问题。 进一步的证明是如果我们将动画减慢到 1FPS - 闪烁仍然存在。

图像对 GPU 来说太大了吗？我们是否已达到您可以在浏览器(尤其是移动设备)中轻松绘制/制作动画的性能极限？

我真的很感激关于如何潜在地消除闪烁的想法/技巧(特别是因为它的表现太快了)。它只是一项很有前途的技术 - 适应不同屏幕尺寸的高性能浏览器动画 - HTML5 chalice ;)

有一些优化比如

<svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50">

和一些 CSS 魔法，我们能够让 SVG 完美地适应它的容器，并从一个 CSS 类改变它的大小。它确实会产生奇迹 - 但可惜闪烁。

无论如何 - 请 read more about it here 您还可以在其中试用。

Answer 1

很酷的想法。

如何更改帧的 zindex，以便将图像叠加在一起？这可能会解决闪烁问题，因为在重绘期间最后一帧仍然可见。因此，您只需不断增加最新帧的 zindex 值即可。当然，这是有限制的，你需要重新设置zindex，但它可能对减少闪烁有很大的影响。