HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。
HTML5的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着与元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。
在这篇文章中，我仅将最新的元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。(所以本文中所有演示代码的效果，在Win
7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果)
这里我选择了一个比较简单的动画：
PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！
分三种方式实现：
(1) canvas元素结合JS
(2) 纯粹的CSS3动画(暂不被所有主流浏览器支持，比如IE)
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码：
01.
02.
03.
04.
Animation in HTML5 using the canvas element05.
06.
07. Your browser does not support
the -element.Please think about updating your brower!
08.
09. Slower
10. Play
11. Faster
12.
13.
14.
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.
02.
03.
04.
Animations in HTML5 using CSS3 animations05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
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.
02.
03.
04.
Animations in HTML5 using CSS3 animations05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
CSS:
01.
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.
JS代码：
首先引入在线API：
实现动画代码(相当简洁)：
01.
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.
简单讲解：prefix首先识别出当前是哪个定义被采用了(-o?-moz?-webkit?-ms?)，然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数(该函数将在在动画的每一步(step)中执行)。然后，定义了一个动画，该定义方式导致了无限自循环调用！
本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。
扫一扫
6266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
