动画选项HTML5 Canvas / CSS3 / jQuery
我有兴趣在其中或者HTML5 / JQuery的组合中做更多类似Flash的动画。
浮动的想法之一是飞鸟，角色动画和“补间”式动画序列。 我是背景的Flash开发者所以所有这些都是基于Flash的基于时间轴的补间动画系统的第二天性，所以我想知道HTML5 Canvas，CSS3和jQuery等新兴技术有什么可能？ 这些在动画之类的补间方面有多熟练？ 阅读有什么好的起点？
例如， http：//www.thewildernessdowntown.com/上的飞鸟令人惊叹，它们似乎是3D，可变方向，速度，旋转，襟翼，速度。 在Flash中可以相对轻松地实现这一点，创建设置动画作为动画片段，在舞台上生成这些动画并以不同的速度或甚至在PV3D中在tweenlite中移动它们但我接下来不知道如何在canvas上实现这一点。
简而言之，关于如何实现上述目标的想法，关于闪存之外的这类动画的良好阅读材料以及您可能拥有的任何一般提示将非常感激。
谢谢
“HTML5”中有三个动画选项：Canvas，SVG和CSS动画（以及良好的旧Javascript动画）。 您使用哪一个取决于您要完成的任务以及您希望它们运行的浏览器。
例如，如果你试图以移动为目标，那么CSS动画是你唯一的选择，因为Canvas一般来说太慢了，Android直到蜂窝才有SVG。 此外，还没有在iOS上启用一堆SVGfunction（例如动画文本路径）。
这是我对CSS动画的介绍，以及我们的Sencha Animator工具的介绍，该工具是alpha版本。
对于桌面Canvas非常棒 – 尽管它在Chrome 10和IE9中确实只能出色地运行 – Safari可能有点慢，特别是随着动画元素数量的增加而在IE7 / 8中不存在（我还没有测试过）还有FF4）。
有一个关于使用html5和javascript编写动画星空的小演示。 查看此页面中的javascript代码。
使用称为Boids的算法完成鸟类动画。 Boids的独特之处在于它具有植绒/群体/学校般的行为，就像鸟类和鱼类最擅长的行为一样。
-
你可能想看看发明家Chris Reynolds对Boids的描述： Chris Reynolds – Boids
-
这是github上的一个脚本可以帮助你： https ： //github.com/nuterian/Flocking
-
这是一个演示： http ： //nuterian.github.io/Flocking/
您可以查看使用canvas进行2D和3d可视化的processingjs 。 我用processingjs做了一个小的可视化，很容易得到一些好的结果。
使用processingjs的优点是您的动画不仅可以在浏览器中运行，还可以在本机处理工具中运行。
在thewildernessdowntonwn中，我认为鸟类已经使用svg和一些javascript动画远离鼠标（因为每个人都知道老鼠可以吃鸟:)）。
我认为，在这个“转换时刻”中，javascript / css3对于简单的动画非常有用，因为它会出现或以某种方式移动。 使用动画也有点复杂，因为Mozilla和Opera仅支持css3过渡，暂时不支持动画。
等等，它仍然可以制作一些硬动画，但你必须很少使用过渡变换，有时变换原点。 你可以在那里找到一些好的信息： http ： //dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
与svg的好处是，这是一个动画更像是一个“传统的flash动画”，它可以通过javascript和css3控制。 Javascript正变得越来越强大，因为所有“现代浏览器”都在像sunspider测试一样进行测试。 因此，您可以使用Javascript做很多事情，我认为不会花费很长时间才能让wysiwyg编辑器输出一个干净的css3代码（我认为adobe是正确的吗？）。
另一方面有这些技术称为WebGL，它允许你使用html5canvas和一些严肃的javascript编写2D和3D应用程序，让你做一些可以使用GPU的力量的惊人的东西。
我希望它能帮助您了解这些新兴技术。