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

Question

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

我正在研究 SVG，似乎获得硬件加速的唯一方法是在其上使用 CSS 转换。但是 CSS 变换还不够，我想对构成矢量的实际节点(即路径上的点)进行动画处理，以便获得更复杂的 Angular 色动画。为此，我正在查看一些基于 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-for-flash-professional/

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

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

所以我的问题是，为了在矢量路径中的节点上制作关键帧动画，需要将矢量转换为 WebGL 或 Canvas 以使其成为 硬件加速 在移动？

p.s 我更喜欢使用 SVG，因为它是在 DOM 中加载的，我可以使用 jquery 来操作。这是一款使用矢量(svg)作为基础的手机游戏，但我也想加入动画——除了基本的 css 转换。我希望有一种方法可以让 .svg 文件不仅包含矢量信息，还包含动画信息。所以我可以加载这个 .svg 文件。然后在javascript中去:
character1.play('animation1') 什么的。如果 SMIL 工作得很快，我相信像 adobe 这样的编辑器会让它变得如此简单。

编辑 :我刚刚读到 Chrome 45 杀死了 SMIL 以支持“网络动画”和 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 这样的矢量到 Canvas 导出商。但是， Canvas 似乎不像 css3 转换那样是硬件加速或快速的。我在我的旧 iPhone 4s/iOS 8 中加载了一些来自 animatron 的动画，它很紧张而且很慢，例如:
https://www.animatron.com/project/1953f3526e5b2ec4eef429c8
而 css3 变换动画总是运行得非常流畅......

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

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

编辑#4 : 想想吧。在我的程序中运行多个 webgl 上下文会很痛苦。所以如果我有 10 个动画 Angular 色，我必须有 10 个 webgl 上下文，这对于移动设备来说会很紧张。除非我选择在 flash 中完成整个游戏，然后在导出后我会有一个大的 webgl 上下文它。但我更喜欢在dom工作。哦，同时css3转换..:/

编辑#5 - 2016 年 12 月 :我现在将 svg/javascript 与 snap.svg 一起使用。现代手机似乎足够快。

我发现的其他有用链接:

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

Answer 1

Canvas 是(据我所知)软件加速。所以它是由处理器(CPU)渲染的。处理器(因为它们是像素)不太擅长图形处理，但对于简单的事情就足够了。它到处运行，只要有处理器。

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

我不会使用 SVG。 SVG 甚至比 DOM 还要糟糕。您可以比 SVG 更快地在 javascript 中操作 HTML。我不知道为什么，但它该死的慢。如果您想拥有可缩放的图形或图表，SVG 只是一种选择，而这正是它的用途。在 SVG 中制作动画是一种痛苦。不要这样做。它没有针对动画进行优化。

CSS-Transform 类似于原型(prototype)，不会帮助您处理关键帧动画。但它有可能关注它。

这对你有帮助吗？