我正在寻找的是使用 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/
最佳答案
Canvas 是(据我所知)软件加速。所以它是由处理器(CPU)渲染的。处理器(因为它们是像素)不太擅长图形处理，但对于简单的事情就足够了。它到处运行，只要有处理器。
如果你想在大多数现代智能手机的硬件加速设备上获得更好的性能，你需要 webgl。但是您可以从 adobe CC 将您的东西导出到 webgl 中。较旧的智能手机在硬件加速方面没有得到很好的优化，因此请与您的目标群体核实他们拥有哪些设备，并尝试在最慢的设备之一上运行您的应用程序。
我不会使用 SVG。 SVG 甚至比 DOM 还要糟糕。您可以比 SVG 更快地在 javascript 中操作 HTML。我不知道为什么，但它该死的慢。如果您想拥有可缩放的图形或图表，SVG 只是一种选择，而这正是它的用途。在 SVG 中制作动画是一种痛苦。不要这样做。它没有针对动画进行优化。
CSS-Transform 类似于原型(prototype)，不会帮助您处理关键帧动画。但它有可能关注它。
这对你有帮助吗？
关于javascript - WebGL 或 Canvas 是获得 SVG 关键帧动画硬件加速的唯一方法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34866402/
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
我正在尝试学习Ruby词法分析器和解析器(whitequarkparser)以了解更多有关从Ruby脚本进一步生成机器代码的过程。在解析以下Ruby代码字符串时。defadd(a,b)returna+bendputsadd1,2它导致以下S表达式符号。s(:begin,s(:def,:add,s(:args,s(:arg,:a),s(:arg,:b)),s(:return,s(:send,s(:lvar,:a),:+,s(:lvar,:b)))),s(:send,nil,:puts,s(:send,nil,:add,s(:int,1),s(:int,3))))任何人都可以向我解释生成的
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
下面的代码工作正常:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson)do|key,oldv,newv|ifkey==:aoldvelsifkey==:bnewvelsekeyendendputskerson.inspect但是如果我在“ifblock”中添加return，我会得到一个错误:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我定义了一个方法:defmethod(one:1,two:2)[one,two]end当我这样调用它时:methodone:'one',three:'three'我得到:ArgumentError:unknownkeyword:three我不想从散列中一个一个地提取所需的键或排除额外的键。除了像这样定义方法之外，有没有办法规避这种行为:defmethod(one:1,two:2,**other)[one,two,other]end 最佳答案 如果不想写**other中的other，可以省略。defmethod(one:1,two:2
动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
我有33个规范以大约5秒的速度运行，以这种速度运行会导致测试套件变慢。我追踪到请求规范(4秒以上)，因为模型规范只用了一小部分时间。我已经检查过，我的请求规范没有任何过于复杂或不必要的东西，所以我不知道该去哪里让它们更快，而不是只在推送代码之前运行它们以确保一切正常.加快请求规范的最佳方法是什么？ 最佳答案 我使用Spork来加速我的测试。它保持整个环境加载以赢得时间。看看这个博客:http://ykyuen.wordpress.com/2010/12/14/rails-running-rspec-with-spork-test-s
