动画选项 HTML5 Canvas/CSS3/jQuery

Posted 2023-05-08

【中文标题】动画选项 HTML5 Canvas/CSS3/jQuery

【英文标题】：Animation options HTML5 Canvas/CSS3/jQuery

【发布时间】：2011-07-24 09:28:08

【问题描述】：

我有兴趣在其中一种或 html5/JQuery 的组合中制作更多类似 Flash 的动画。

其中一个想法是飞鸟、角色动画和类似“补间”的动画序列。我是一个背景的 Flash 开发人员，所以所有这一切都是通过 Flash 的基于时间轴的补间动画系统的第二天性，所以我想知道 HTML5 Canvas、CSS3 和 jQuery 等新兴技术有什么可能？这些在补间动画方面有多熟练？阅读的最佳起点是什么？

例如http://www.thewildernessdowntown.com/ 的飞鸟是惊人的，它们看起来是 3d 的，可变方向、速度、旋转、襟翼、速度。在 Flash 中可以相对轻松地实现这一点，将场景动画创建为电影剪辑，在舞台上生成这些动画并在 tweenlite 中以各种速度甚至在 PV3D 中移动它们，但我几乎不知道如何在画布上实现这一点.

因此，简而言之，关于如何实现上述目标的想法、关于 Flash 之外的此类动画的良好阅读材料以及您可能拥有的任何一般提示将不胜感激。

谢谢

【参考方案1】：

在“HTML5”中有三个动画选项：Canvas、SVG 和 CSS 动画（以及良好的旧 javascript 动画）。您使用哪一个取决于您要完成的工作以及您希望它们在哪些浏览器上运行。

例如，如果您尝试以移动设备为目标，那么 CSS 动画是您唯一的选择，因为 Canvas 通常太慢，而 android 直到蜂巢式才具有 SVG。 ios 上还没有启用一堆 SVG 功能（例如动画文本路径）。

这是我的intro presentation to CSS animations，也是对我们的 Sencha Animator 工具的介绍，该工具是 alpha 版。

对于桌面版 Canvas 非常棒 - 虽然它确实只在 Chrome 10 和 IE9 中运行良好 - Safari 可能会有点慢，特别是随着动画元素数量的增加，它在 IE7/8 中不存在（而且我没有'尚未测试FF4）。

【讨论】：

非常感谢。我同样关注了 Grant Skinner 的 js 时间线控制和他在位图排序方面的一些实验，但即使作为 alpha 版本，这似乎也更加成熟。

谢谢你，太好了:)

【参考方案2】：

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

【参考方案3】：

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

您可能想查看发明者 Chris Reynolds 对 Boid 的描述：Chris Reynolds - Boids

这里有一个 github 上的脚本可以帮助你：https://github.com/nuterian/Flocking

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

【参考方案4】：

您可以查看processingjs，它使用画布进行 2d 和 3d 可视化。我用 processingjs 做了一个小的可视化，很容易得到一些好的结果。

使用 processingjs 的优点是您的动画不仅可以在浏览器中运行，而且可以在本机处理工具中运行。

【参考方案5】：

在 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 做很多事情，我认为用所见即所得的编辑器输出干净的 css3 代码不会花很长时间（我认为 adobe 是正确的吗？）。

另一方面，这些技术称为 WebGL，它允许您通过使用 html5 画布和一些严肃的 javascript 编写 2D 和 3D 应用程序，让您可以利用 GPU 的力量做一些令人惊奇的事情。

希望它能帮助你看透那些新兴技术。