动画选项 HTML5 Canvas/CSS3/jQuery
我有兴趣使用 HTML5/JQuery 或 HTML5/JQuery 的组合来制作一些更像 flash 的动画。
流传的想法之一是飞鸟、角色动画和类似“补间”的动画序列。我是一名 Flash 开发人员，所以所有这些都是通过 Flash 基于时间轴的补间动画系统的第二天性，所以我想知道 HTML5 Canvas、CSS3 和 jQuery 等新兴技术可以实现什么？这些对于补间动画有多熟练？阅读的一个好的起点是什么？
例如 http://www.thewildernessdowntown.com/ 上飞翔的鸟儿令人惊叹，它们看起来是 3d 的，方向、速度可变、旋转、襟翼、速度。在Flash中可以相对轻松地实现这一点，创建固定动画作为影片剪辑，在舞台上生成这些动画并以不同的速度甚至在PV3D中在tweenlite中移动它们，但我几乎不知道如何在画布上实现这一点。
简而言之，如果您能提供有关如何实现上述目标的想法、有关 Flash 之外的此类动画的良好阅读材料以及您可能拥有的任何一般提示，我们将不胜感激。
谢谢
I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery.
One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all of this is second nature via Flash's timeline based motion tween system so i'm wondering just what is possible with new emerging technologies like HTML5 Canvas, CSS3 and jQuery? How adept are these at tween like animation? What's a good starting point to read up on?
For example the flying birds at http://www.thewildernessdowntown.com/ are amazing, they appear to be 3d, variable direction, speed, rotation, flap, speed. In Flash could achieve this with relative ease, creating set piece animations as movieclips, generating these on the stage and moving them around in tweenlite at various speeds or even in PV3D but i've next to no idea how this would be achieved on the canvas.
So in short, ideas on how the above was achieved, good reading material on this type of animation outside of flash and any general tips you might have would be much appreciated.
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
“HTML5”中有三个动画选项：Canvas、SVG 和 CSS 动画（以及老式的 Javascript 动画）。您使用哪一种取决于您想要完成的任务以及您希望它们在哪些浏览器上运行。
例如，如果您尝试面向移动设备，CSS 动画是您唯一的选择，因为 Canvas 一般而言太慢，而且 Android 直到蜂巢才出现 SVG。此外，iOS 上尚未启用大量 SVG 功能（例如动画文本路径）。
这是我的CSS 动画的介绍演示以及简介到我们的 Sencha Animator 工具，该工具已发布 alpha 版。
对于桌面 Canvas 来说非常棒 - 尽管它确实只在 Chrome 10 和 IE9 中表现出色 - Safari 可能会有点慢，特别是随着动画元素数量的增加，而且它在 IE7/8 中不存在（我还没有测试过） FF4 还没有）。
You have three animation options in "HTML5": Canvas, SVG and CSS Animations (as well as good old Javascript animation). Which one you use depends on what you're trying to accomplish and which browsers you want them to run on.
If you're trying to target mobile, for example, CSS animations are your only choice because Canvas is too slow in general, and Android didn't have SVG until honeycomb. Also a bunch of SVG capabilities are not enabled on iOS yet (e.g. animated text paths).
Here's my intro presentation to CSS animations and also an introduction to our Sencha Animator tool, which is out in alpha.
For desktop Canvas is pretty awesome - although it really only works excellently in Chrome 10 and IE9 - Safari can be a bit slow particularly as the number of animated elements climbs and it doesn't exist in IE7/8 (and I haven't tested FF4 yet).
有一个关于使用 html5 和 javascript 编写动画星空的小演示。查看此页面中的 JavaScript 代码。
There's a little demo about writing an animated starfield using html5 and javascript. Check out the javascript code in this page.
鸟类动画是使用称为 Boids 的算法完成的。群落的独特之处在于它具有类似于鸟类和鱼类最擅长的集群/集群/学校行为。
您可能想查看发明者 Chris Reynolds 对 Boids 的描述：Chris Reynolds - Boids
这是 github 上的一个脚本，可能会对您有所帮助：https:// github.com/nuterian/Flocking
这是一个演示：http:// nuterian.github.io/Flocking/
The birds animation is done using an algorithm called Boids. Boids is unique in that it has a flocking/swarm/school like behavior like what birds and fish do best.
You might want to check out the description of the Boids by the inventor Chris Reynolds: Chris Reynolds - Boids
Here is a script on github that may help you: https://github.com/nuterian/Flocking
Here is a demo: http://nuterian.github.io/Flocking/
您可以查看 processingjs，它使用画布进行 2D 和 3D 可视化。我用processingjs做了一个小型可视化，很容易得到一些好的结果。
使用processingjs的优点是你的动画不仅可以在浏览器中运行，而且可以在本机处理工具中运行。
You could check out processingjs which uses canvas for 2d and 3d visualizations. I have done a small visualization with processingjs and it is fairly easy to get some good results.
The advantage of using processingjs is that your animation would not only run in the browser but also in native processing tools.
在 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 canvas 和一些重要的 javascript 来编写 2D 和 3D 应用程序，这些应用程序允许您使用 GPU 的强大功能来做一些令人惊奇的事情。
我希望它能帮助您了解这些新兴技术。
In thewildernessdowntonwn, I think birds have been animated using svg and some javascript to run away from the mouse (because everybody know mouses can eat birds :) ).
I think, in this "transitions moment" javascript/css3 could be very helpful for simple animation as something appear or move one way and another.
It's also a bit complicated to use animations since Mozilla and Opera only support css3 transition and no animation for moment.
Wait, it's still possible to make some hard animation but you will have to play hardly with transition transform and sometimes transform origin.
You can have some good informations there :
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
The good point with svg is this is build to be animated more like a "traditionnal flash animation" and it can be controled by javascript and css3.
Javascript is becoming more and more powerfull since all "modern browsers" are fighting on test like sunspider test.
So you can do a lot with Javascript, I think it won't take long until a wysiwyg editor will output a clean css3 code (I think adobe is on its way right ?).
On the other hand there are these technologies call WebGL, it allow you by using html5 canvas and some serious javascript to write 2D and 3D application that allow you to do some amazing stuff that can use the power of GPU.
I hope it helped you to see through those emerging technologies.