WebGL或Canvas是获得SVG关键帧动画硬件加速的唯一方法吗? [英] Is WebGL or Canvas the only way to get SVG Keyframe Animations Hardware Accelerated?
问题描述
我正在寻找的是使用html5的移动电话的Flash替代方案.
我一直在研究SVG，看来获得硬件加速的唯一方法是在其上使用CSS转换.但是CSS变换还不够，我想为构成矢量的实际节点(即路径上的点)设置动画，以便获得更复杂的角色动画.为此，我正在看一些基于gui的编辑器.
我检查了Adobe做了什么，他们似乎杀死了Edge Animate，并在2016年将Flash重新命名为"Animate CC".
http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/ https://博客.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 ，它也可以将所有内容转换为画布.
>所以我的问题是，为了在矢量路径内的节点上进行关键帧动画，需要将矢量转换为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/zh-CN/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.crmarsh.com/svg-performance/
画布(据我所知)是软件加速的.因此它是由处理器(CPU)渲染的.处理器(因为它们是像素)在图形方面不是很好，但是对于简单的事情来说就足够了.它可以在任何有处理器的地方运行.
如果要在大多数现代智能手机采用的硬件加速设备上获得更好的性能，则需要webgl.但是您可以从adobe CC导出webgl中的内容.较早的智能手机在硬件加速方面不是非常优化，因此请与您的目标群体核对它们拥有哪些设备，然后尝试在速度最慢的设备之一上运行您的应用程序.
我不会使用SVG.SVG比DOM更糟糕.与SVG相比，您可以更快地在javascript中处理HTML.我不知道为什么，但是那太慢了.如果您想要具有可伸缩的图形或图表，那么SVG只是一种选择，这就是它的用途.在SVG中制作动画非常痛苦.不要这样尚未针对动画进行优化.
CSS-Transform类似于原型，不会帮助您进行关键帧动画.但是它有潜力关注它.
这对您有帮助吗?
What I'm looking is a flash alternative for mobile phones using html5.
I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors.
I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded Flash as "Animate CC" for 2016.
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/
But reading up on "Animate CC" I see that it exports vector animations to either Canvas or WebGL. Which I think is due to them not getting hardware acceleration with native SVG via SMIL or using javascript. https://css-tricks.com/guide-svg-animations-smil/
Another one is http://www.animatron.com which converts everything to canvas as well.
So my question is, in order to do keyframe animations on nodes within a vector path, a vector needs to be converted to either WebGL or Canvas for it to be hardware accelerated on mobile?
p.s I prefer using SVG as it's loaded in the DOM and I can manipulate things with jquery. This is for a mobile game that uses vectors (svg) as its base but I'd like to incorporate animations too - beyond the basic css transforms. I wish there was a way to have a .svg file that not only contains the vector information but also the animation info. so I could load this .svg file. and then in javascript go: character1.play('animation1') or something. If SMIL worked fast I'm sure editors like adobe would make it as simple as that.
EDIT: I just read that Chrome 45 killed SMIL in favor of "web animations" and css. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL And as Kaiido mentioned in the comments IE never supported smil so maybe that's why adobe never exported to it (?). http://caniuse.com/#feat=svg-smil also I never saw any examples online that show hardware accelerated path animation with smil, if any of you guys find a link pls let me know.
EDIT #2: I'm thinking of giving up my wishful thinking and instead looking at vector to canvas exporters like animatron.com. However, it doesn't seem like canvas is even hardware accelerated or fast like css3 transforms. I loaded some animations from animatron in my old iPhone 4s/iOS 8 and it's jittery and slow for example: https://www.animatron.com/project/1953f3526e5b2ec4eef429c8 whereas css3 transform animations always run very smooth...
I still haven't tested vector to webgl.. but I think that's why adobe eventually chose to use it for their vector animations since canvas is slow and svg is limited.
EDIT #3: sure enough it seems like webgl is the way to go (unless someone finds a way to do this with native svg) http://www.yeahbutisitflash.com/?p=7231 .. this works fast in my iphone 4s/ios8.. I currently think this is the only way to do what I want: hardware accelerated vector based animation (however the graphics don't look as crisp as I'd want them.. webgl kinda messed with that I think). but this is why I think Edge Animate got killed cause they were trying to create a tool that took advantage of css3 transforms, but ppl want to animate vector nodes so they went back to Flash and rebranded it. (another note: the above webgl anim doesn't work so well on my galaxy S4/kitkat android phone.. so this is mainly for newer devices/OSs)
EDIT #4: come to think of it. it'd be a pain to have multiple webgl contexts running in my program. so if I had 10 animated characters I'd have to have 10 webgl contexts which would be intense for a mobile device.. unless I chose to do the whole game in flash, and then I'd have one big webgl context after I export it. but I prefer to work in the dom. oh well css3 transforms for the meantime.. :/
EDIT #5 - Dec 2016: I'm now using svg/javascript with snap.svg. modern phones seem fast enough.
Other Useful Links I Found:
http://www.crmarsh.com/svg-performance/
Canvas is (as far as i know) software accelerated. So it's rendered by the processor (CPU). The processor (cause of them pixels) ain't that good at graphical stuff but for simple things it would be enough. And it runs everywhere, where there is a processor.
If you want to have better performance on hardware accelerated devices which most modern smartphones are, you need webgl. But you can export your stuff in webgl from adobe CC. Older smartphones are not very optimized on hardware acceleration so please check with your target group what devices they have and try to run your app on one of the slowest devices.
I would not use SVG. SVG is even worse than DOM. You can be faster manipulating HTML in javascript than SVG. I don't know why but it is damn slow. SVG is just an alternative if you want to have scalable graphics or charts and that's what it is made for. To animate in SVG is a pain. Don't do it. It is not optimized for animation.
CSS-Transform is a prototype-like and will not help you with keyframe animation. But it has potential to have an eye on it.
Does this help you?
这篇关于WebGL或Canvas是获得SVG关键帧动画硬件加速的唯一方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
