【总结】HTML5动画介绍

发表于2014-12-23 20:00 | 次阅读 | 0条评论 | 作者：siru90

1、什么是动画？
所谓编程中的动画，实际是“对象属性随时间变化”。因此除了视觉上传统的动画，声音的渐强渐弱也是动画的一种。
因此动画实现起来也很简单，设一个定时器，不停地改属性就可以了。实际上很多动画引擎都是这么做的。但CSS3对此进行了封装。

HTML5实现动画的方式，按照属性改变的方式可以分为三种：
CSS3
JavaScript
Canvas

2、首先介绍CSS3。CSS3动画包括4个方面：
l  CSS 2D Transformations,
l  CSS 3D Transformations,
l  CSS Transitions,
l  CSS Animations；

Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性，如rotate, scale, skew。Transition 和 Animation配合用于定义动画的过程。
Transition 可以实现简单的动画，Animation则可以通过设定多个关键帧实现相对复杂的动画

2.1     那么选择CSS3动画有什么好处呢？
1.不需要其他任何语言或者插件的支持；
2. 相对Flash来说对无线端的支持非常好，可以实现很多Flash的动画效果；
3.代码量比用JS少很多；
4. 让浏览器来负责生成动画，所以类似GPU加速这样的优化对CSS3也是有效果的；

2.2     以下是paipai中应用HTML5动画的例子：

拍拍3月彩钻节

http://www.paipai.com/caizuanjie.shtml

拍拍5月促销活动

http://www.paipai.com/fangjia.shtml

手机QQ网购
http://m.buy.qq.com/?t=t

ECD前端实验室

http://ecd.ecc.com/fd_lab/concept/view.html

关于过渡的效果应用动画的过渡效果，可以让动画看起来更自然，常见的有ease-in、ease、贝塞尔等几种效果的差别可以参考下面的例子：

http://www.paipai.com/promote/2012/index_240.shtml
2.3 一些技巧2D的变换比较简单，一共4种，具体语法就不讲了，到处都可以查到：
rotate: -webkit-transform:rotateX(0deg) rotateY(0deg);
scale: -webkit-transform:scale(.3, .3);
skew: -webkit-transform:skew(-10deg);
matrix: -webkit-transform:matrix(1,0,0,1,0,0);

Skew(X,Y) X正数是向X轴负方向扭曲，Y正数是向Y轴负方向扭曲；IE下matrix滤镜可以实现在其他高级浏览器相同的效果；进行3D变换有一些技巧，比如制作旋转立方体时，将正方体的每个面（div）用3D变换定位好，然后在父层（div）上应用3D动画，达到旋转的正方体的效果； 2.4 一些Demo：

https://developer.mozilla.org/zh-TW/demos/detail/battlefield-css3/launch
一个用CSS3动画实现的超棒战争动画；

http://www.paipai.com/promote/2012/index_236.shtml

CSS3幻灯片

http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
CSS3 3D变换

http://www.paipai.com/promote/2012/index_218.shtml

CSS3菜单，太阳系，进度条

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm
你可以在这里找到目前所有的动画效果；

http://www.paipai.com/promote/2012/index_238.shtml

JS+CSS3 3d盒子

http://lasas.me/demo/img_opt/ppt.html

http://bartaz.github.com/impress.js/#/bored
CSS3幻灯片 2.5 CSS3与JS2.5.1 通过JS调用CSS3属性webkit内核的浏览器提供了很多CSS3的事件接口，开发者可以很方便的使用这些事件；

例如在safari的文档中，你可以在webkit中直接调用它的CSS3方法：Firfox

由于每个浏览器都带自己的前缀，所以在控制的时候需要将他们的前缀都提取出来，然后操作这些属性即可：
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop;
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i]; break;
}
}

2.5.2 还可以利用JS操作CSS3的keyframe动画。
在支持CSS3动画的浏览器中存在一个WebKitCSSKeyframesRule 构造器，可以用来改变keyframe：

大家可以参考《使用Javascript动态管理CSS》

2.5.3、一些JS类库

http://daneden.me/animate/
Transiton过渡动画的集合，animate.css可以直接引用到你的项目中；

JQUERY TRANSIT

http://ricostacruz.com/jquery.transit/

move.js

http://visionmedia.github.com/move.js/

http://jsanim.com/
一个动画库，只有25KB，非常强大；

2.6、 CSS3在手机端的实现
新款的智能手机基本能够支持CSS3动画。在做手机QQ网购APP的时候，我们总结了以下几点经验：
l  在相同配置下安卓4.X以下版本系统自带的浏览器或者第三方浏览器使用2D变换改变top，left的方式比用3D TransformXY的速度慢了很多倍，或者是完全无法运行，在4.x版本表现比较良好；
l  同样系统不同配置时，高配要比低配表现好不少；
l  3D TransformXY可以调用手机的GPU资源，也就是可以硬件加速，但是代价就是加速耗电；
l  IOS没有这些问题；

2.7、性能
l  CSS 2D矩阵动画效率高于JS利用margin和left,top模拟的矩阵动画；
l  CSS3其它常规动画属性的效率低于JS模拟的动画;
l  过度使用infinite导致帧数明显下降，且webkit下明显比firfox下更卡；

2.8 、CSS3动画总结：
优点
简单，无需其他支持；
简单动画可以直接在CSS中实现，无需JS
可以支持3D效果变换；
可以通过优化硬件来优化动画；
无线端支持非常好；
缺点

需要书写大量前缀来兼容浏览器；
IE10以下支持非常少；
市面上目前制作调试工具较少，只能靠自己测试；

Tips
l  在IOS上表现非常好，andriod平台与硬件配置有很大关系，如果不考虑能耗问题，硬件加速效果很好；
l  一些CSS自有属性的改变建议使用JS来控制；
l  Infinite属性勿滥用，会导致网页帧数显著降低；
l  可以通过一些工具来制作，减少代码成本；
l  Transform中要注意顺序问题：
n  perspective必须在最前面

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/
n rotateX与rotate的顺序对效果有影响。

http://www.alloyteam.com/2012/11/the-order-of-roate-with-rotatex-problem/

3、 JavaScript动画
用JavaScript做动画，就是利用setInterval和setTimeOut调用定时器，不断修改属性、刷新页面的。原理很简单，现在已经有很多动画库了，比如jQuery。这里仅介绍一些注意事项
1. 大家时刻牢记JavaScript与UI共享浏览器线程因此一定要注意因此带来的性能问题。
2. 关于15毫秒与33毫秒，JS定时器不是很精确，精度差一些的浏览器只有15ms。为了保险期间，可以扩大至2倍，33毫秒正好是每秒30帧。
3. 注意重绘（redraw）与重排（reflow）
a) 一次性对多个属性赋值，避免在IE下闪烁如： node.cssText = "heigth:100px;width:100px;top:100px";
b) 将动画元素使用绝对定位，提出页面布局流之外

4 、 Canvas动画
Canvas是HTML5中最强大一个特性，它使用Immediate Model，而不是Retain Model（Flash，Silverlight的模式）。Immediate Model的特点是：

浏览器只显示唯一的对象（canvas本身）
开发者自行维护逻辑显示对象
Logical Display Object
需要自己处理鼠标和键盘事件
需要自己开发控件，也可以与已有控件交互
与Video，Audio的结合非常灵活
可以支持2D，3D

Canvas还可以非常好的与视频和音频结合。
Canvas的自由度非常大，几乎什么都可以通过JS控制，但相应的工作量也比较大。关于Canvas向大家推荐，O’Reilly的《HTML5 Canvas》。本人正在翻译这本书，预计明年上半年中文版可以与大家见面。

4.1 、动画与声音交互可以使用HTML5中的AudioElement与动画配合播放声音。但是用声音是需要注意以下问题：
重复播放声音需要多少对象？
声音需要加载几次？
浏览器最多支持多少个声音对象？
一个AudioElement只能同时播放一个声音，如果需要一个相同的声音快速、连续播放，比如连续射击的声音，那么就需要加载多个对象。
有几个AudioElement对象，就要加载几次音频文件。是的，我们不得不重复下载同一个文件。所以要做好缓存。
浏览器中如果同时加载过多的AudioElement，浏览器会崩溃。
因此建议使用“声音池”管理声音。JXAnimate中实现了一个声音池，大家可以参考。

5 、三种动画的比较
JavaScript方式兼容性最好
CSS3 方式的动画编码简单，可以实现3D等效果，适合在网页上想简单的效果动画。
Canvas最灵活，IE9，FF，Chrome都支持，还可以支持：支持3D，物理引擎，碰撞检测；游戏的首选

5.1、3种动画模式性能对比我分别用3种方式编写了同一种动画：图片在框中反弹的动画，如图：

下面的表格是每种动画在绘制较少（1000或10个）图片和5000个图片时的对比：

比较实际的运行效果，在极端情况下（5000个图片），
Canvas表现的最流畅，但速度变慢；
JavaScript最卡。
CSS的Transition的速度不变，但是丢帧。
对CPU和内存的消耗都差不多。

6 、介绍一个动画框架JXAnimate
这是我正在开发中的一个动画框架，可以在JS中很方便的调用CSS3的动画，兼容多个浏览器，而且可以还可以让动画配合声音效果。
还有一个有趣的多米诺效果。
JXAnimate中实现了一个声音池，可以比较方便的预加载、播放声音。
这是一个开源项目，欢迎大家一起开发。项目地址是：

https://github.com/AlloyTeam/JXAnimate

7、WebGL介绍
WebGL是一套JavaScript API，允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形。
需要最新的Chrome、FireBox、Safari以及支持3D加速的显卡；DirectX运行库
WebGL使用的是类似OpenGL的低级建模语言，比较难理解，可以使用一些JS框架：

Oak3D
流程清晰、简单易用、性能高效。

http://www.oak3d.com/MagicCube/

Three.js
封装了WebGL的底层接口。

http://mrdoob.github.com/three.js/
WebGL还处于试验阶段，如果大家感兴趣，可以查看下面的教程：

http://www.hiwebgl.com/?p=42

https://developer.mozilla.org/en-US/docs/WebGL/Getting_started_with_WebGL
http://www.mhtml5.com/resources/webgl学习教程3（翻译自：httplearningwebgl-com）

8、总结
HTML5在动画方面很强大，不多目前支持最广泛的还是CSS3。因此推荐大家可以在网页中尝试使用一些简单的CSS3动画效果，就像之前拍拍中应用的效果类似。
这是因为：
1.使用CSS3很简单，不需要Flash的开发知识。
2.代码量很小、效果却很丰富
3. 可以支持智能手机
4. 及时浏览器不支持，也只不过显示静态画面，零风险。

上一篇：【总结】02项目总结---html5常用开发总结
下一篇：HTML5框架——Createjs入门