WebGL或Canvas是获得SVG关键帧动画硬件加速的唯一方法吗？

Question

我正在寻找的是使用html5的手机闪存替代品。

我正在研究SVG，看来获得硬件加速的唯一方法就是使用CSS转换。 但CSS转换是不够的，我想动画构成矢量的实际节点（即路径上的点），这样我就可以得到更复杂的角色动画。 为此，我正在寻找一些基于gui的编辑。

我检查了adobe一直在做什么，他们似乎杀死了Edge Animate并将Flash重新命名为2016年的“Animate CC”。

http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/ https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-对于闪光专业/

但阅读“Animate CC”，我发现它将矢量动画导出到Canvas或WebGL。 我认为这是由于他们没有通过SMIL或使用javascript获得本机SVG的硬件加速。 https://css-tricks.com/guide-svg-animations-smil/

另一个是http://www.animatron.com ，它也将所有内容转换为画布。

所以我的问题是，为了在矢量路径中的节点上进行关键帧动画，需要将矢量转换为WebGL或Canvas，以便在移动设备上进行硬件加速 ？

ps我更喜欢使用SVG，因为它在DOM中加载，我可以用jquery操作。 这是一个使用矢量（svg）作为基础的移动游戏，但我也希望合并动画 - 超出基本的CSS转换。 我希望有一种方法可以有一个.svg文件，它不仅包含矢量信息，还包含动画信息。 所以我可以加载这个.svg文件。 然后在javascript中转到：character1.play（'animation1'）或其他东西。 如果SMIL工作得很快，我肯定像adobe这样的编辑会让它变得如此简单。

编辑 ：我刚看到Chrome 45杀死了SMIL而支持“web动画”和css。 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL正如Kaiido在评论中提到的，IE从不支持smil所以也许这就是为什么adobe从未出口过它（？）。 http://caniuse.com/#feat=svg-smil我也从未在网上看过任何用smil显示硬件加速路径动画的例子，如果有人找到链接请告诉我。

编辑＃2 ：我正在考虑放弃我的一厢情愿，而是看着像animatron.com这样的矢量到画布出口商。 但是，它看起来似乎不像硬件加速或快速像css3转换。 我在旧的iPhone 4s / iOS 8中加载了一些来自animatron的动画，例如它的抖动和缓慢： https ： //www.animatron.com/project/1953f3526e5b2ec4eef429c8而css3转换动画总是非常流畅...

我还没有测试过矢量到webgl ..但我认为这就是为什么adobe最终选择将它用于矢量动画，因为画布很慢而且svg是有限的。

编辑＃3 ：果然看起来像webgl是要走的路（除非有人找到了用本地svg做到这一点的方法） http://www.yeahbutisitflash.com/?p=7231 ..这在我的iphone中运行得很快4s / ios8 ..我目前认为这是我想要的唯一方法：基于硬件加速矢量的动画（但是图形看起来并不像我想要的那样清晰...... webgl有点混乱我认为） 。 但这就是为什么我认为Edge Animate被杀死的原因是他们试图创建一个利用css3变换的工具，但是ppl想要动画矢量节点，以便他们回到Flash并重新命名。 （另一个注意事项：上面的webgl动画在我的Galaxy S4 / kitkat安卓手机上运行不太好..所以这主要适用于较新的设备/操作系统）

编辑＃4 ：来想一想。 在我的程序中运行多个webgl上下文会很痛苦。 所以，如果我有10个动画角色，我必须拥有10个webgl上下文，这对于移动设备来说非常激烈..除非我选择在flash中完成整个游戏，然后在导出后我会有一个大的webgl上下文它。 但我更喜欢在dom工作。 哦，好css3转换为其间..：/

编辑＃5 - 2016年12月 ：我现在正在使用带有snap.svg的svg / javascript。 现代手机似乎足够快。

我找到的其他有用链接：

http://www.crmarsh.com/svg-performance/

Answer 1

Canvas（据我所知）软件加速了。 所以它由处理器（CPU）呈现。 处理器（它们的像素的原因）在图形方面不是很好，但对于简单的事情来说就足够了。 它随处可见，有处理器。

如果您希望在大多数现代智能手机的硬件加速设备上获得更好的性能，那么您需要webgl。 但是你可以从adobe CC导出webgl中的东西。 较旧的智能手机在硬件加速方面并未得到很好的优化，因此请与目标群体核实他们拥有的设备，并尝试在最慢的设备上运行您的应用。

我不会使用SVG。 SVG比DOM更糟糕。 你可以更快地在javascript中操作HTML而不是SVG。 我不知道为什么，但它很慢。 如果您想拥有可扩展的图形或图表，那么SVG只是一种替代方案。 在SVG中制作动画是一种痛苦。 不要这样做。 它没有针对动画进行优化。

CSS-Transform就像原型一样，对关键帧动画没有帮助。 但它有可能关注它。

这对你有帮助吗？

Answer 2

我认为这是一个难以回答的问题，因为不同浏览器存在很多问题。 有些不能很好地支持SMIL转换（或者被弃用，但正如前面提到的那样有些填充），有些根本不支持SVG元素的CSS3转换，所以大多数“解决方案”都有一些问题，可能需要妥协。 我认为一个浏览器不能正确地支持d属性变形，但是我不记得哪个（所以如果你沿着这条路线进行测试，那么请尽早测试所需的浏览器）。

对于我见过或玩过的大多数动画来说，Canvas在移动设备上的表现似乎更好，当然随着页面上对象数量的增加。

提到的webGL的其他替代方案..

有点选择的一个选项是fabric.js，它是SVG的画布方法。 它将采用与SVG相同的命令，元素，但将其显示在HTML5画布上。 关闭其中的drag / freetransform（因为我认为如果它需要额外的检查，它会减慢一点），我认为它会更快一点，但是我已经玩了一段时间了。 如果您不需要特定的DOM元素访问，这可能是一种有趣的方法，但如果您对基于类似对象的设置没有问题则可以。

如果你坚持使用SVG，那么我会考虑将它与另一个库（甚至是2）集成。 Snap或SVG.js都不错，但可能有点慢。 但是，我会尝试将Velocity.js或React.js与svg库一起使用，因为它们有一些方法可以挤出更多的性能。 GSAP也值得一看。

Answer 3

对此没有一般的答案，这取决于浏览器的实现和你的硬件，但是......对于长期的解决方案， 我敢打赌WebGL，因为它使用GPU并最终占据主导地位。

WebGL目前（2016年）得不到很好的支持 ，它可能带来安全问题 。 另请参阅： https ： //css-tricks.com/rendering-svg-paths-in-webgl/

Canvas更适合处理原始的2d像素缓冲区（+ alpha通道），并且对于更高分辨率+动画来说速度较慢。 你可以使用像Pixi这样的双库。

Answer 4

如果你不介意k-weight增加一点并且使用flash很舒服，那么最简单和最快速的解决方案就是使用Animate CC（它完全是Flash，没有符号过滤器，而是提供画布输出而不是swf）。

Answer 5

这个库/插件可能正是您所需要的： Greensock SVG Morph插件 。 它似乎在移动设备上表现相当不错，不确定它在您提到的设备上的表现如何。

它也不是GPU加速，但Greensock动画平台即使在移动设备上也表现得非常好。