理论上,(基于矢量)SVG应该是理想的,但由于SVG通常不会使用那么多 – 我们决定测试它。这个想法不是使用SMIL SVG(所以没有基于SVG的动画),而是创建一个动画sprite-sheet(通常会与光栅数据PNG / JPG),但这样做与纯矢量,即SVG。它有点大,但如果它的工作原理 – 它会工作,甚至更好的东西。
加上逐帧矢量动画可以为我们的工作流做很大的事 – 它将允许我们使用Flash编辑器来做动画,然后将它们导出到SVG精灵表。
无论如何,结果工作出奇的好,但也失败在某些领域(请注意,为测试目的,我们只使用基于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); } to { -webkit-transform: translate3d(-100%,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),但这没有帮助ether。
最后,我们只是用一个渲染出的PNG / JPG精灵表替换了SVG,因为复杂的向量对于浏览器来说太多了 – 但猜测是什么?它的同样的问题 – 所以它的不是SVG渲染 – 它的浏览器绘图问题。进一步的证明是,如果我们将动画降低到1FPS – 闪烁仍然存在。
图像对于GPU来说太大了吗?我们是否达到了您能够在浏览器(特别是移动设备)中舒适地绘制/动画化的性能限制?
我真的很感激的想法/黑客如何可能摆脱闪烁(特别是因为它执行sooo快)。它只是一个有前途的技术 – 高性能浏览器动画适应不同的屏幕尺寸 – HTML5 Holy Grail;
有几个优化如
<svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50">
和一些CSS魔术,我们能够使SVG适应其容器完美,并改变其大小从一个单一的CSS类。它真的会工作奇迹 – 但可惜的闪烁。
反正 – 请read more about it here,你也可以尝试一下。