10

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

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

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

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

谢谢

4

5 回答 5

7

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

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

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

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

于 2011-03-28T23:36:36.467 回答
1

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

于 2011-03-29T08:28:25.747 回答
1

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

于 2013-06-01T20:40:37.323 回答
0

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

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

于 2011-03-28T11:59:51.400 回答
0

在 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 的力量做一些令人惊奇的事情。

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

于 2011-03-28T23:16:49.320 回答