html5 – 优化基于SVG的精灵表在CSS3硬件GPU加速在(手机)浏览器

前端之家收集整理的这篇文章主要介绍了html5 – 优化基于SVG的精灵表在CSS3硬件GPU加速在(手机)浏览器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在过去的一周,我一直在帮助一个朋友在浏览器中使用基于SVG的sprite工具。我们想要提供一个理想的工作流程,以准备,发布和在浏览器中运行高品质的动画图形。因此,理想情况下有一个单一的动画数据来源,适用于小智能手机屏幕,平板电脑,视网膜显示器和桌面浏览器。

理论上,(基于矢量)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,你也可以尝试一下。

解决方法

相当酷的想法。

如何改变框架的zindex,以便你将图像层叠在彼此的顶部?这可能解决闪烁,因为在重绘期间,最后一帧仍然可见。所以,你只是继续增加最新帧的zindex值。当然,有一个限制,你需要重新设置zindex,但它可能会减少闪烁的巨大影响。

原文链接:https://www.f2er.com/html5/169760.html

猜你在找的HTML5相关文章