for*_*yez 29 javascript html5 svg canvas webgl
我正在寻找的是使用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.现代手机似乎足够快.
我找到的其他有用链接:
我认为这是一个很难回答的问题，因为不同的浏览器存在很多问题。有些不能很好地支持 SMIL 转换（或者已被弃用，但正如前面提到的，有一些填充），有些根本不支持 SVG 元素上的 CSS3 转换，因此大多数“解决方案”都存在一些问题可能需要妥协。我认为有一个浏览器不能正确支持 d 属性变形，但我不记得是哪一个（因此，如果您确实走这条路线，请尽早使用所需的浏览器进行测试）。
对于我见过或玩过的大多数动画来说，Canvas 通常在移动设备上表现得更好，当然，随着页面上对象数量的增加。
提到的 webGL 的其他替代品..
我想到的一个选择是fabric.js，它是一种SVG 画布方法。它将采用与 SVG 相同的命令和元素，但将其显示在 HTML5 画布上。关闭其中的拖动/自由变换（因为我认为如果需要额外的检查，它会减慢一点），我认为它会快一点，但自从我玩以来已经有一段时间了。如果您不需要特定的 DOM 元素访问，这可能是一个有趣的方法，但如果您接受类似的基于对象的设置，那就没问题了。
如果您坚持使用 SVG，那么我会考虑将其与另一个库（甚至 2 个）集成。Snap 或 SVG.js 都不错，但可能有点慢。不过，我会尝试将 Velocity.js 或 React.js 与该 svg 库一起使用，因为它们有一些可以提高性能的方法。GSAP 也值得一看。