logo标签列表

HTML5 Canvas/CSS3/jQuery的动画选项

jqueryhtmlcanvascsshtml5-animation
10

我对使用HTML5/JQuery制作一些类似Flash的动画很感兴趣。

其中一个想法是制作飞鸟、角色动画和Tween-like动画序列。由于我是Flash开发人员，所以通过Flash基于时间轴的运动Tween系统来实现这一切是很自然的，因此我想知道像HTML5 Canvas、CSS3和jQuery等新兴技术在Tween-like动画方面有什么可能性？它们在Tween-like动画方面的熟练程度如何？哪些是关于此主题的好起点阅读材料？

例如，在http://www.thewildernessdowntown.com/上的飞鸟非常惊人，它们似乎是3D的，具有可变的方向、速度、旋转、振动和速度。在Flash中，可以相对轻松地通过创建设置动画片段、在舞台上生成这些动画片段并在Tweenlite中以各种速度或甚至在PV3D中移动它们来实现这一点，但是我几乎不知道如何在canvas上实现这一点。

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

谢谢

5个回答
7
在"HTML5"中，您有三种动画选项：Canvas、SVG和CSS动画（以及老旧的Javascript动画）。您使用哪一种取决于您想要完成的任务以及您想要在哪些浏览器上运行它们。
例如，如果您希望针对移动设备进行目标定位，则CSS动画是您唯一的选择，因为Canvas通常太慢了，而且Android直到honeycomb才有SVG。此外，iOS上尚未启用许多SVG功能（例如动画文本路径）。
这是我的介绍演示文稿CSS动画，还有我们的Sencha Animator工具介绍，已经发布了α版。
对于桌面设备，Canvas非常棒 - 尽管它在Chrome 10和IE9中表现得非常出色 - Safari可能会有点慢，特别是当动画元素的数量增加时，并且在IE7/8中不存在（我还没有测试过FF4）。
太好了，谢谢。我也看过Grant Skinner的js时间轴控件和他在位图序列方面的一些实验，但即使是alpha版本，这个控件似乎更加成熟。 - dg85
1
1
这是一个关于使用HTML5和JavaScript编写动画星场的小演示。请查看此页面中的JavaScript代码。
0
你可以查看 processingjs，它使用画布进行2D和3D可视化。我已经用processingjs做了一个小的可视化效果，而且很容易得到一些好的结果。
使用processingjs的优点是你的动画不仅可以在浏览器中运行，还可以在本地处理工具中运行。
0
在城市的荒野中，我认为鸟类已经使用SVG和一些JavaScript进行了动画处理，以便远离鼠标（因为每个人都知道老鼠可以吃掉鸟）。
我认为，在这个“转换时刻”，JavaScript / CSS3可以非常有助于简单的动画效果，例如某些东西出现或向一个方向移动，然后又移动回来。但是，由于Mozilla和Opera目前仅支持CSS3过渡而不支持动画，因此使用动画有点复杂。
等等，仍然可以制作一些复杂的动画，但您必须通过过渡变换和有时的变换原点来进行艰苦的操作。您可以在这里获得一些好的信息： http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ SVG的好处在于它被构建为更像“传统Flash动画”，并且可以通过JavaScript和CSS3进行控制。随着所有“现代浏览器”都在进行像SunSpider测试这样的测试，JavaScript变得越来越强大。因此，您可以使用JavaScript做很多事情，我认为不久之后就会有所见所得的编辑器输出干净的CSS3代码（我想Adobe正在努力吧？）。
另一方面，有这些名为WebGL的技术，它允许您使用HTML5画布和一些严肃的JavaScript编写2D和3D应用程序，使您能够做一些惊人的事情，可以利用GPU的功率。
我希望它能帮助您了解这些新兴技术。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接