动画选项HTML5 Canvas/CSS3/jQuery

Question

我感兴趣的是在HTML5/JQuery或两者的组合中做一些更像flash的动画。

其中一个想法是飞鸟、角色动画和类似于“青少年”的动画序列。我是一个flash开发的背景，所以所有这些都是第二自然通过闪光的时间轴的动画补间系统，所以我想知道什么是可能的新技术，如HTML5画布，CSS3和jQuery？这些在补间动画方面有多熟练？什么是一个很好的阅读起点？

例如，http://www.thewildernessdowntown.com/上的飞鸟令人惊叹，它们看起来是3d的，方向、速度、旋转、拍打、速度都是可变的。在Flash中可以相对容易地实现这一点，创建动画片段作为电影剪辑，在舞台上生成这些动画，并在tweenlite中以不同的速度移动它们，甚至在PV3D中移动它们，但我几乎不知道如何在画布上实现这一点。

因此，简而言之，关于如何实现上述的想法，关于flash之外的这类动画的好阅读材料，以及任何你可能有的一般技巧，都将不胜感激。

谢谢

Answer 1

在“HTML5”中有三个动画选项: Canvas，SVG和CSS Animations (以及很好的老Javascript动画)。您使用哪种浏览器取决于您试图完成的任务以及您希望它们在哪些浏览器上运行。

例如，如果你试图瞄准移动设备，CSS动画是你唯一的选择，因为Canvas通常太慢了，而Android直到honeycomb才有SVG。此外，iOS上还没有启用大量的SVG功能(例如动画文本路径)。

这是我的intro presentation to CSS animations，也是对我们的Sencha动画工具的介绍，它是在alpha中发布的。

对于桌面画布来说，FF4非常棒--尽管它只在Chrome10和IE9上表现出色-- Safari可能会有点慢，特别是随着动画元素的数量不断攀升，而且它在IE7/8中不存在(我还没有测试过Canvas )。

Answer 2

有一个关于使用html5和javascript编写动画星空的小演示。查看this page中的javascript代码。

Answer 3

鸟的动画是使用称为Boids的算法完成的。Boids的独特之处在于，它具有类似鸟类和鱼类最擅长的群集/蜂群/学校式的行为。

你可能想看看发明家克里斯·雷诺兹对车身的描述：Chris Reynolds - Boids

• Here是github上的一个脚本，可能会对你有所帮助：https://github.com/nuterian/Flocking

• Here是一个演示：http://nuterian.github.io/Flocking/