动画选项HTML5 Canvas / CSS3 / jQuery [英] Animation options HTML5 Canvas/CSS3/jQuery

问题描述

我有兴趣在HTML5 / JQuery中组合使用一些更类似Flash的动画。

I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery.

浮动的想法之一是飞翔鸟，字符动画和tween般的动画序列。我是一个Flash开发的背景，所有这一切都是第二自然通过Flash的基于时间轴的动作补间系统，所以我想知道什么是可能的新兴技术像HTML5 Canvas，CSS3和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?

例如，飞翔的鹰在 http： //www.thewildernessdowntown.com/ 是惊人的，他们似乎是3d，可变方向，速度，旋转，襟翼，速度。在Flash可以实现这一点相对容易，创建设置片段动画作为电影切片，生成这些在舞台上，并以各种速度甚至在PV3D的tweenlite中移动他们，但我不知道如何在画布上实现。

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.

感谢

推荐答案

：Canvas，SVG和CSS Animations（以及好的老Javascript动画）。你使用哪一个取决于你想要完成什么和你希望他们运行哪些浏览器。

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.

例如，如果您尝试定位移动设备，CSS动画是您唯一的选择，因为Canvas通常太慢，Android没有SVG，直到蜂窝。还有一些SVG功能在iOS上没有启用（例如动画文本路径）。

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).

这是我的介绍到CSS动画，还介绍了我们的Sencha Animator工具，它是在alpha。

Here's my intro presentation to CSS animations and also an introduction to our Sencha Animator tool, which is out in alpha.

对于桌面Canvas是相当真棒 - 虽然它真的只有工作在Chrome 10和IE9的杰出 - Safari可以有点慢，特别是随着动画元素的数量爬升，它不存在于IE7 / 8和我还没有测试FF4）。

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 Canvas / CSS3 / jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！