| HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。
HTML5的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。
在这篇文章中，我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。（所以本文中所有演示代码的效果，在Win
7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果）
这里我选择了一个比较简单的动画：
PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！
分三种方式实现：
(1) canvas元素结合JS
(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码：
|
01.<html>
02. <head>
03. <meta charset="UTF-8" />
04. <title>Animation in HTML5 using the canvas element</title>
05. </head>
06. <body onload="init();">
07. <canvas id="canvas" width="1000" height="600">Your browser does not support
the <code><canvas></code>-element.Please think about updating your brower!</canvas>
08. <div id="controls">
09. <button type="button" onclick="speed(-0.1);">Slower</button>
10. <button type="button" onclick="play(this);">Play</button>
11. <button type="button" onclick="speed(+0.1)">Faster</button>
12. </div>
13. </body>
14.</html>
|
JS代码：
定义一些变量：
|
01.var dx=5, //当前速率
02. rate=1, //当前播放速度
03. ani, //当前动画循环
04. c, //画图(Canvas Context)
05. w, //汽车[隐藏的](Canvas Context)
06. grassHeight=130, //背景高度
07. carAlpha=0, //轮胎的旋转角度
08. carX=-400, //x轴方向上汽车的位置(将被改变)
09. carY=300, //y轴方向上汽车的位置(将保持为常量)
10. carWidth=400, //汽车的宽度
11. carHeight=130, //汽车的高度
12. tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离
13. axisDelta=20, //汽车底部底盘的轴与轮胎的距离
14. radius=60; //轮胎的半径
|
为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数
|
01.(function(){
02. var car=document.createElement('canvas'); //创建元素
03. car.height=carHeight+axisDelta+radius; //设置高度
04. car.width=carWidth; //设置宽度
05. w=car.getContext('2d');
06. })();
|
点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
|
01.function play(s){ //参数s是一个button
02. if(ani){ //如果ani不为null，则代表我们当前已经有了一个动画
03. clearInterval(ani); //所以我们需要清除它(停止动画)
04. ani=null;
05. s.innerHTML='Play'; //重命名该按钮为“播放”
06. }else{
07. ani=setInterval(drawCanvas,40);
//我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一
08. s.innerHTML='Pause'; //重命名该按钮为“暂停”
09. }
10. }
|
加速，减速，通过以下方法，改变移动距离的大小来实现：
|
01.function speed(delta){
02. var newRate=Math.max(rate+delta,0.1);
03. dx=newRate/rate*dx;
04. rate=newRate;
05. }
|
页面加载的初始化方法：
|
01.//init
02. function init(){
03. c=document.getElementById('canvas').getContext('2d');
04. drawCanvas();
05. }
|
主调方法：
|
01.function drawCanvas(){
02. c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显示的)，避免产生错误
03. c.save(); //保存当前坐标值以及状态，对应的类似“push”操作
04.
05. drawGrass(); //画背景
06. c.translate(carX,0); //移动起点坐标
07. drawCar(); //画汽车(隐藏的canvas)
08. c.drawImage(w.canvas,0,carY); //画最终显示的汽车
09. c.restore(); //恢复Canvas的状态，对应的是类似“pop”操作
10. carX+=dx; //重置汽车在X轴方向的位置，以模拟向前走
11. carAlpha+=dx/radius; //按比例增加轮胎角度
12.
13. if(carX>c.canvas.width){ //设置某些定期的边界条件
14. carX=-carWidth-10; //也可以将速度反向为dx*=-1;
15. }
16. }
|
画背景：
|
01.function drawGrass(){
02. //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标
03. var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);
04. //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色
05. grad.addColorStop(0,'#33CC00');
06. grad.addColorStop(1,'#66FF22');
07. c.fillStyle=grad;
08. c.lineWidth=0;
09. c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);
10.
11. }
|
画车身：
|
01.function drawCar(){
02. w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隐藏的画板
03. w.strokeStyle='#FF6600'; //设置边框色
04. w.lineWidth=2; //设置边框的宽度，单位为像素
05. w.fillStyle='#FF9900'; //设置填充色
06. w.beginPath(); //开始绘制新路径
07. w.rect(0,0,carWidth,carHeight); //绘制一个矩形
08. w.stroke(); //画边框
09. w.fill(); //填充背景
10. w.closePath(); //关闭绘制的新路径
11. drawTire(tiresDelta+radius,carHeight+axisDelta); //我们开始画第一个轮子
12. drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同样的，第二个
13.
14. }
|
画轮胎：
|
01.function drawTire(x,y){
02. w.save();
03. w.translate(x,y);
04. w.rotate(carAlpha);
05. w.strokeStyle='#3300FF';
06. w.lineWidth=1;
07. w.fillStyle='#0099FF';
08. w.beginPath();
09. w.arc(0,0,radius,0,2*Math.PI,false);
10. w.fill();
11. w.closePath();
12. w.beginPath();
13. w.moveTo(radius,0);
14. w.lineTo(-radius,0);
15. w.stroke();
16. w.closePath();
17. w.beginPath();
18. w.moveTo(0,radius);
19. w.lineTo(0,-radius);
20. w.stroke();
21. w.closePath();
22. w.restore();
23.
24. } |
由于原理简单，并且代码中作了详细注释，这里就不一一讲解！
该是CSS3出场了
你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：
HTML代码：
|
01.<html>
02. <head>
03. <meta charset="UTF-8" />
04. <title>Animations in HTML5 using CSS3 animations</title>
05. </head>
06. <body>
07. <div id="container">
08. <div id="car">
09. <div id="chassis"></div>
10. <div id="backtire" class="tire">
11. <div class="hr"></div>
12. <div class="vr"></div>
13. </div>
14. <div id="fronttire" class="tire">
15. <div class="hr"></div>
16. <div class="vr"></div>
17. </div>
18. </div>
19. <div id="grass"></div>
20. </div>
21. <footer></footer>
22. </body>
23.</html> |
CSS代码：
|
01.body
02. {
03. padding:0;
04. margin:0;
05. }
|
定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）
|
01./*定义动画：从-400px的位置移动到1600px的位置 */
02. @keyframes carAnimation
03. {
04. 0% { left:-400px; } /* 指定初始位置，0%等同于from*/
05. 100% { left:1600px; } /* 指定最终位置,100%等同于to*/
06. }
07.
08. /* Safari and Chrome */
09. @-webkit-keyframes carAnimation
10. {
11. 0% {left:-400px; }
12. 100% {left:1600px; }
13. }
14.
15. /* Firefox */
16. @-moz-keyframes carAnimation
17. {
18. 0% {left:-400; }
19. 100% {left:1600px; }
20. }
21.
22. /*IE暂不支持,此处定义是为了向后兼容IE10*/
23. @-ms-keyframes carAnimation
24. {
25. 0% {left:-400px; }
26. 100%{left:1600px; }
27. } |
|
01.@keyframes tyreAnimation
02. {
03. 0% {transform: rotate(0); }
04. 100% {transform: rotate(1800deg); }
05. }
06.
07. @-webkit-keyframes tyreAnimation
08. {
09. 0% { -webkit-transform: rotate(0); }
10. 100% { -webkit-transform: rotate(1800deg); }
11. }
12.
13. @-moz-keyframes tyreAnimation
14. {
15. 0% { -moz-transform: rotate(0); }
16. 100% { -moz-transform: rotate(1800deg); }
17. }
18.
19. @-ms-keyframes tyreAnimation
20. {
21. 0% { -ms-transform: rotate(0); }
22. 100% { -ms-transform: rotate(1800deg); }
23. } |
|
01.#container
02. {
03. position:relative;
04. width:100%;
05. height:600px;
06. overflow:hidden; /*这个很重要*/
07. }
08.
09. #car
10. {
11. position:absolute; /*汽车在容器中采用绝对定位*/
12. width:400px;
13. height:210px; /*汽车的总高度，包括轮胎和底盘*/
14. z-index:1; /*让汽车在背景的上方*/
15. top:300px; /*距顶端的距离(y轴)*/
16. left:50px; /*距左侧的距离(x轴)*/
17.
18. /*以下内容赋予该元素预先定义的动画及相关属性*/
19. -webkit-animation-name:carAnimation; /*名称*/
20. -webkit-animation-duration:10s; /*持续时间*/
21. -webkit-animation-iteration-count:infinite; /*迭代次数-无限次*/
22. -webkit-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/
23.
24. -moz-animation-name:carAnimation; /*名称*/
25. -moz-animation-duration:10s; /*持续时间*/
26. -moz-animation-iteration-count:infinite; /*迭代次数-无限次*/
27. -moz-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/
28.
29. -ms-animation-name:carAnimation; /*名称*/
30. -ms-animation-duration:10s; /*持续时间*/
31. -ms-animation-iteration-count:infinite; /*迭代次数-无限次*/
32. -ms-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/
33.
34. animation-name:carAnimation; /*名称*/
35. animation-duration:10s; /*持续时间*/
36. animation-iteration-count:infinite; /*迭代次数-无限次*/
37. animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/
38. }
39.
40. /*车身*/
41. #chassis
42. {
43. position:absolute;
44. width:400px;
45. height:130px;
46. background:#FF9900;
47. border: 2px solid #FF6600;
48. }
49.
50. /*轮胎*/
51. .tire
52. {
53. z-index:1; /*同上，轮胎也应置于背景的上方*/
54. position:absolute;
55. bottom:0;
56. border-radius:60px; /*圆半径*/
57. height:120px; /* 2*radius=height */
58. width:120px; /* 2*radius=width */
59. background:#0099FF; /*填充色*/
60. border:1px solid #3300FF;
61.
62. -webkit-animation-name:tyreAnimation;
63. -webkit-animation-duration:10s;
64. -webkit-animation-iteration-count:infinite;
65. -webkit-animation-timing-function:linear;
66.
67. -moz-animation-name:tyreAnimation;
68. -moz-animation-duration:10s;
69. -moz-animation-iteration-count:infinite;
70. -moz-animation-timing-function:linear;
71.
72. -ms-animation-name:tyreAnimation;
73. -ms-animation-duration:10s;
74. -ms-animation-iteration-count:infinite;
75. -ms-animation-timing-function:linear;
76.
77. animation-name:tyreAnimation;
78. animation-duration:10s;
79. animation-iteration-count:infinite;
80. animation-timing-function:linear;
81. }
82.
83. #fronttire
84. {
85. right:20px; /*设置右边的轮胎距离边缘的距离为20*/
86. }
87.
88. #backtire
89. {
90. left:20px; /*设置左边的轮胎距离边缘的距离为20*/
91. }
92.
93. #grass
94. {
95. position:absolute; /*背景绝对定位在容器中*/
96. width:100%;
97. height:130px;
98. bottom:0;
99. /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */
100. background:linear-grdaient(bottom,#33CC00,#66FF22);
101. background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);
102. background:-moz-linear-gradient(bottom,#33CC00,#66FF22);
103. background:-ms-linear-gradient(bottom,#33CC00,#66FF22);
104. }
105.
106. .hr,.vr
107. {
108. position:absolute;
109. background:#3300FF;
110. }
111.
112. .hr
113. {
114. height:1px;
115. width:100%; /*轮胎的水平线*/
116. left:0;
117. top:60px;
118. }
119.
120. .vr
121. {
122. width:1px;
123. height:100%; /*轮胎的垂直线*/
124. left:60px;
125. top:0;
126. } |
JQuery与CSS3合体
这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）
HTML代码（可以看到与CSS3中的HTML代码并无不同）：
|
01.<html>
02. <head>
03. <meta charset="UTF-8" />
04. <title>Animations in HTML5 using CSS3 animations</title>
05. </head>
06. <body>
07. <div id="container">
08. <div id="car">
09. <div id="chassis"></div>
10. <div id="backtire" class="tire">
11. <div class="hr"></div>
12. <div class="vr"></div>
13. </div>
14. <div id="fronttire" class="tire">
15. <div class="hr"></div>
16. <div class="vr"></div>
17. </div>
18. </div>
19. <div id="grass"></div>
20. </div>
21. <footer></footer>
22. </body>
23.</html> |
CSS:
|
01.<style>
02. body
03. {
04. padding:0;
05. margin:0;
06. }
07.
08. #container
09. {
10. position:relative;
11. width:100%;
12. height:600px;
13. overflow:hidden; /*这个很重要*/
14. }
15.
16. #car
17. {
18. position:absolute; /*汽车在容器中采用绝对定位*/
19. width:400px;
20. height:210px; /*汽车的总高度，包括轮胎和底盘*/
21. z-index:1; /*让汽车在背景的上方*/
22. top:300px; /*距顶端的距离(y轴)*/
23. left:50px; /*距左侧的距离(x轴)*/
24. }
25.
26. /*车身*/
27. #chassis
28. {
29. position:absolute;
30. width:400px;
31. height:130px;
32. background:#FF9900;
33. border: 2px solid #FF6600;
34. }
35.
36. /*轮胎*/
37. .tire
38. {
39. z-index:1; /*同上，轮胎也应置于背景的上方*/
40. position:absolute;
41. bottom:0;
42. border-radius:60px; /*圆半径*/
43. height:120px; /* 2*radius=height */
44. width:120px; /* 2*radius=width */
45. background:#0099FF; /*填充色*/
46. border:1px solid #3300FF;
47. -o-transform:rotate(0deg); /*旋转(单位：度)*/
48. -ms-transform:rotate(0deg);
49. -webkit-transform:rotate(0deg);
50. -moz-transform:rotate(0deg);
51. }
52.
53. #fronttire
54. {
55. right:20px; /*设置右边的轮胎距离边缘的距离为20*/
56. }
57.
58. #backtire
59. {
60. left:20px; /*设置左边的轮胎距离边缘的距离为20*/
61. }
62.
63. #grass
64. {
65. position:absolute; /*背景绝对定位在容器中*/
66. width:100%;
67. height:130px;
68. bottom:0;
69. /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */
70. background:linear-grdaient(bottom,#33CC00,#66FF22);
71. background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);
72. background:-moz-linear-gradient(bottom,#33CC00,#66FF22);
73. background:-ms-linear-gradient(bottom,#33CC00,#66FF22);
74. }
75.
76. .hr,.vr
77. {
78. position:absolute;
79. background:#3300FF;
80. }
81.
82. .hr
83. {
84. height:1px;
85. width:100%; /*水平线*/
86. left:0;
87. top:60px;
88. }
89.
90. .vr
91. {
92. width:1px;
93. height:100%; /*垂直线*/
94. left:60px;
95. top:0;
96. }
97.
98. </style> |
JS代码：
首先引入在线API：
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
实现动画代码（相当简洁）：
|
01.<script>
02. $(function(){
03. var rot=0;
04. var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?
'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':
($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));
05.
06. var origin={ /*设置我们的起始点*/
07. left:-400
08. };
09.
10. var animation={ /*该动画由jQuery执行*/
11. left:1600 /*设置我们将移动到的最终位置*/
12. };
13.
14. var rotate=function(){ /*该方法将被旋转的轮子调用*/
15. rot+=2;
16. $('.tire').css(prefix,'rotate('+rot+'deg)');
17. };
18.
19. var options={ /*将要被jQuery使用的参数*/
20. easing:'linear', /*指定速度，此处只是线性，即为匀速*/
21. duration:10000, /*指定动画持续时间*/
22. complete:function(){
23. $('#car').css(origin).animate(animation,options);
24. },
25. step:rotate
26. };
27.
28. options.complete();
29. });
30. </script>
|
简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！
本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。
|
