动画选项HTML5 Canvas/CSS3/jQuery

Question

我有兴趣在HTML5/JQuery的组合中做更多类似Flash的动画.

浮动的想法之一是飞鸟,角色动画和"补间"式动画序列.我是背景的Flash开发者所以这一切都是基于Flash的基于时间轴的补间动画系统的第二天性,所以我想知道HTML5 Canvas,CSS3和jQuery等新兴技术有什么可能呢？这些在动画之类的补间方面有多熟练？阅读有什么好的起点？

例如,http://www.thewildernessdowntown.com/上的飞鸟令人惊叹,它们似乎是3d,可变方向,速度,旋转,襟翼,速度.在Flash中可以相对轻松地实现这一点,创建设置动画作为动画片段,在舞台上生成这些动画,并以不同的速度甚至在PV3D中以tweenlite移动它们但我接下来不知道如何在画布上实现这一点.

简而言之,关于如何实现上述目标的想法,关于闪存之外的这类动画的良好阅读材料以及您可能拥有的任何一般提示将非常感激.

谢谢

Answer 1

"HTML5"中有三个动画选项:Canvas,SVG和CSS动画(以及良好的旧Javascript动画).您使用哪一个取决于您要完成的任务以及您希望它们运行的​​浏览器.

例如,如果你试图定位移动设备,那么CSS动画是你唯一的选择,因为Canvas一般来说速度太慢,Android直到蜂窝状态才有SVG.iOS上还没有启用一堆SV​​G功能(例如动画文本路径).

这是我对CSS动画的介绍,以及我们的Sencha Animator工具的介绍,该工具是alpha版本.

对于桌面Canvas非常棒 - 尽管它在Chrome 10和IE9中确实只能很好地运行 - Safari可能会有点慢,特别是随着动画元素数量的增加而在IE7/8中不存在(我还没有测试过)还有FF4).