优化(移动)浏览器中用于CSS3 HW GPU加速的基于SVG的精灵表

Question

在过去的一周里,我一直在帮助朋友在浏览器中试验基于SVG的精灵表.我们希望在浏览器中提供理想的工作流程来准备,发布和运行高质量的动画图形.因此,理想情况下,单个动画数据源可用于小型智能手机屏幕,平板电脑,视网膜显示器和桌面浏览器.

理论上,(基于矢量的)SVG应该是理想的,但由于SVG通常不常用 - 我们决定测试它.我的想法不是使用SMIL SVG(因此没有基于SVG的动画),而是创建一个动画精灵表(正如您通常使用栅格数据PNG/JPG),但使用纯矢量即SVG.它有点大,但如果它有效 - 它甚至可以用更优化的东西工作.

加上逐帧矢量动画可以为我们的工作流做很多事情 - 它允许我们使用Flash编辑器来制作动画,然后将它们导出到SVG精灵表.

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

在CSS中,很容易为这样的精灵表触发硬件加速(至少在具有关键帧和步骤的现代浏览器中) - 你只需这样做:

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浏览器中的硬件加速.

令人惊讶的是,考虑到它是一种蛮力技术和相当大的矢量动画(600x600px用于测试) - 整个事情过得很快.但它并不完美 - 它在起飞前在Safari中闪烁.并且在ICS浏览器中它一直闪烁,所以它不是真的可用.

所以我们尝试了通常的技巧来摆脱闪烁,例如:

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

但那没用.那么我们尝试在内存中动态栅格化SVG并将其用作-webkit-transform的纹理:scale3d(1,1,0),但这对以太没有帮助.

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

图像对GPU来说太大了吗？我们是否达到了您在浏览器(特别是移动设备)中舒适绘制/动画的性能限制？

我真的很感激如何摆脱闪烁的想法/黑客(特别是因为它表现得太快).它只是一种很有前途的技术 - 适应不同屏幕大小的高性能浏览器动画 - HTML5圣杯 ;)

通过一些优化,如

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

还有一些CSS魔法我们能够让SVG完美地适应它的容器,并从单个CSS类改变它的大小.它真的会产生奇迹 - 但唉闪烁.

无论如何 - 请在这里阅读更多关于它的地方,你也可以尝试一下.

Answer 1

很酷的主意。

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