HTML5实现动画三种方式

编者注：作者以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1) canvas元素结合JS

(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）

(3) CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

1.canvas

html 代码：

<html>

   <head>

      <meta charset="UTF-8" />

         <title>Animation in HTML5 using the canvas element</title>

    </head>

   <body onload="init();">

      <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>

      <div id="controls">

         <button type="button" onclick="speed(-0.1);">Slower</button>

         <button type="button" onclick="play(this);">Play</button>

	 <button type="button" onclick="speed(+0.1)">Faster</button>

      </div>

   </body>

</html>

js代码：

定义一些变量：

var dx=5,			//当前速率

		    rate=1,			//当前播放速度

		    ani,			//当前动画循环

		    c,				//画图(Canvas Context)

		    w,				//汽车[隐藏的](Canvas Context)

		    grassHeight=130,		//背景高度

		    carAlpha=0,			//轮胎的旋转角度

		    carX=-400,			//x轴方向上汽车的位置(将被改变)

		    carY=300,			//y轴方向上汽车的位置(将保持为常量)

		    carWidth=400,		//汽车的宽度

		    carHeight=130,		//汽车的高度

		    tiresDelta=15,		//从一个轮胎到最接近的汽车底盘的距离

		    axisDelta=20,		//汽车底部底盘的轴与轮胎的距离

		    radius=60;			//轮胎的半径

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

(function(){

		   var car=document.createElement('canvas');	//创建元素

		   car.height=carHeight+axisDelta+radius;	//设置高度

		   car.width=carWidth;				//设置宽度

		   w=car.getContext('2d');

		})();

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

function play(s){				//参数s是一个button

		   if(ani){					//如果ani不为null，则代表我们当前已经有了一个动画

		      clearInterval(ani);			//所以我们需要清除它(停止动画)

		      ani=null;

		      s.innerHTML='Play';			//重命名该按钮为“播放”

		   }else{

		      ani=setInterval(drawCanvas,40);		//我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一

		      s.innerHTML='Pause';			//重命名该按钮为“暂停”

		   }

		}

加速，减速，通过以下方法，改变移动距离的大小来实现：

function speed(delta){

		   var newRate=Math.max(rate+delta,0.1);

		   dx=newRate/rate*dx;

		   rate=newRate;

		}

页面加载的初始化方法：

//init

	    	function init(){

		   c=document.getElementById('canvas').getContext('2d');

		   drawCanvas();

		}

主调方法：

function drawCanvas(){

		   c.clearRect(0,0,c.canvas.width, c.canvas.height);	//清除Canvas(已显示的)，避免产生错误

		   c.save();						//保存当前坐标值以及状态，对应的类似“push”操作

		   drawGrass();						//画背景

		   c.translate(carX,0);					//移动起点坐标

		   drawCar();						//画汽车(隐藏的canvas)

		   c.drawImage(w.canvas,0,carY);			//画最终显示的汽车

		   c.restore();						//恢复Canvas的状态，对应的是类似“pop”操作

		   carX+=dx;						//重置汽车在X轴方向的位置，以模拟向前走

		   carAlpha+=dx/radius;					//按比例增加轮胎角度

		   if(carX>c.canvas.width){				//设置某些定期的边界条件

		      carX=-carWidth-10;				//也可以将速度反向为dx*=-1;

		   }

		}

画背景：

function drawGrass(){

		   //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标

		   var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);

		   //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色

		   grad.addColorStop(0,'#33CC00');

		   grad.addColorStop(1,'#66FF22');

		   c.fillStyle=grad;

  	 	   c.lineWidth=0;

		   c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);

		}

画车身：

function drawCar(){

		   w.clearRect(0,0,w.canvas.width,w.canvas.height);		//清空隐藏的画板

		   w.strokeStyle='#FF6600';					//设置边框色

  		   w.lineWidth=2;						//设置边框的宽度，单位为像素

		   w.fillStyle='#FF9900';					//设置填充色

		   w.beginPath();						//开始绘制新路径

		   w.rect(0,0,carWidth,carHeight);				//绘制一个矩形

		   w.stroke();							//画边框

		   w.fill();							//填充背景

		   w.closePath();						//关闭绘制的新路径

		   drawTire(tiresDelta+radius,carHeight+axisDelta);		//我们开始画第一个轮子

		   drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);	//同样的，第二个

		}

画轮胎：

function drawTire(x,y){

		   w.save();

		   w.translate(x,y);

		   w.rotate(carAlpha);

		   w.strokeStyle='#3300FF';

		   w.lineWidth=1;

		   w.fillStyle='#0099FF';

		   w.beginPath();

		   w.arc(0,0,radius,0,2*Math.PI,false);

		   w.fill();

		   w.closePath();

		   w.beginPath();

		   w.moveTo(radius,0);

		   w.lineTo(-radius,0);

		   w.stroke();

		   w.closePath();

		   w.beginPath();

		   w.moveTo(0,radius);

		   w.lineTo(0,-radius);

		   w.stroke();

		   w.closePath();

		   w.restore();

		}

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

2.CSS3

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：

HTML代码：

<html>

   <head>

      <meta charset="UTF-8" />

      <title>Animations in HTML5 using CSS3 animations</title>

       </head>

   <body>

      <div id="container">

	  <div id="car">

	     <div id="chassis"></div>

	     <div id="backtire" class="tire">

		 <div class="hr"></div>

		 <div class="vr"></div>

	     </div>

	     <div id="fronttire" class="tire">

		 <div class="hr"></div>

		 <div class="vr"></div>

	     </div>

	  </div>

	  <div id="grass"></div>

      </div>

      <footer></footer>

   </body>

</html>

CSS代码：

 body

	 {

	    padding:0;

	    margin:0;

	 }

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

 /*定义动画：从-400px的位置移动到1600px的位置 */

	 @keyframes carAnimation

	 {

	    0% { left:-400px; }		/* 指定初始位置，0%等同于from*/

	    100% { left:1600px; }	/* 指定最终位置,100%等同于to*/

	 }

	 /* Safari and Chrome */

	 @-webkit-keyframes carAnimation

	 {

	    0% {left:-400px; }

	    100% {left:1600px; }

	 }

	 /* Firefox */

	 @-moz-keyframes carAnimation

	 {

	    0% {left:-400; }

	    100% {left:1600px; }

	 }

	 /*IE暂不支持,此处定义是为了向后兼容IE10*/

	 @-ms-keyframes carAnimation

	 {

	    0% {left:-400px; }

	    100%{left:1600px; }

	 }

 @keyframes tyreAnimation

	 {

	    0% {transform: rotate(0); }

	    100% {transform: rotate(1800deg); }

	 }

	 @-webkit-keyframes tyreAnimation

	 {

	    0% { -webkit-transform: rotate(0); }

	    100% { -webkit-transform: rotate(1800deg); }

	 }

	 @-moz-keyframes tyreAnimation

	 {

	    0% { -moz-transform: rotate(0); }

	    100% { -moz-transform: rotate(1800deg); }

	 }

	 @-ms-keyframes tyreAnimation

	 {

	    0% { -ms-transform: rotate(0); }

	    100% { -ms-transform: rotate(1800deg); }

	 }

 #container

	 {

	    position:relative;

	    width:100%;

	    height:600px;

	    overflow:hidden;		/*这个很重要*/

	 }

	 #car

	 {

	    position:absolute; 		/*汽车在容器中采用绝对定位*/

	    width:400px;

	    height:210px;		/*汽车的总高度，包括轮胎和底盘*/

	    z-index:1;			/*让汽车在背景的上方*/

	    top:300px;			/*距顶端的距离(y轴)*/

	    left:50px;			/*距左侧的距离(x轴)*/

	    /*以下内容赋予该元素预先定义的动画及相关属性*/

	    -webkit-animation-name:carAnimation;		/*名称*/

	    -webkit-animation-duration:10s;			/*持续时间*/

	    -webkit-animation-iteration-count:infinite;		/*迭代次数-无限次*/

	    -webkit-animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/

	    -moz-animation-name:carAnimation;		/*名称*/

	    -moz-animation-duration:10s;			/*持续时间*/

	    -moz-animation-iteration-count:infinite;		/*迭代次数-无限次*/

	    -moz-animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/

	    -ms-animation-name:carAnimation;		/*名称*/

	    -ms-animation-duration:10s;			/*持续时间*/

	    -ms-animation-iteration-count:infinite;		/*迭代次数-无限次*/

	    -ms-animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/

	    animation-name:carAnimation;		/*名称*/

	    animation-duration:10s;			/*持续时间*/

	    animation-iteration-count:infinite;		/*迭代次数-无限次*/

	    animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/

	 }

	 /*车身*/

	 #chassis

	 {

	    position:absolute;

	    width:400px;

	    height:130px;

	    background:#FF9900;

	    border: 2px solid #FF6600;

	 }

	 /*轮胎*/

	 .tire

	 {

	    z-index:1;			/*同上，轮胎也应置于背景的上方*/

	    position:absolute;

	    bottom:0;

	    border-radius:60px;		/*圆半径*/

	    height:120px;		/* 2*radius=height */

	    width:120px;		/* 2*radius=width */

	    background:#0099FF;		/*填充色*/

	    border:1px solid #3300FF;

	    -webkit-animation-name:tyreAnimation;

	    -webkit-animation-duration:10s;

	    -webkit-animation-iteration-count:infinite;

	    -webkit-animation-timing-function:linear;

	    -moz-animation-name:tyreAnimation;

	    -moz-animation-duration:10s;

	    -moz-animation-iteration-count:infinite;

	    -moz-animation-timing-function:linear;

	    -ms-animation-name:tyreAnimation;

	    -ms-animation-duration:10s;

	    -ms-animation-iteration-count:infinite;

	    -ms-animation-timing-function:linear;	    

	    animation-name:tyreAnimation;

	    animation-duration:10s;

	    animation-iteration-count:infinite;

	    animation-timing-function:linear;

	 }

	 #fronttire

	 {

	    right:20px;		/*设置右边的轮胎距离边缘的距离为20*/

	 }

	 #backtire

	 {

	    left:20px;		/*设置左边的轮胎距离边缘的距离为20*/

	 }

	 #grass

	 {

	    position:absolute;	/*背景绝对定位在容器中*/

	    width:100%;

	    height:130px;

	    bottom:0;

	    /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */

	    background:linear-grdaient(bottom,#33CC00,#66FF22);

	    background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);

	    background:-moz-linear-gradient(bottom,#33CC00,#66FF22);

	    background:-ms-linear-gradient(bottom,#33CC00,#66FF22);

	 }

	 .hr,.vr

	 {

	    position:absolute;

	    background:#3300FF;

	 }

	 .hr

	 {

	    height:1px;

	    width:100%;		/*轮胎的水平线*/

	    left:0;

	    top:60px;

	 }

	 .vr

	 {

	    width:1px;

	    height:100%;	/*轮胎的垂直线*/

	    left:60px;

	    top:0;

	 }

3.JQuery与CSS3

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：

<html>

   <head>

      <meta charset="UTF-8" />

      <title>Animations in HTML5 using CSS3 animations</title>

       </head>

   <body>

      <div id="container">

	  <div id="car">

	     <div id="chassis"></div>

	     <div id="backtire" class="tire">

		 <div class="hr"></div>

		 <div class="vr"></div>

	     </div>

	     <div id="fronttire" class="tire">

		 <div class="hr"></div>

		 <div class="vr"></div>

	     </div>

	  </div>

	  <div id="grass"></div>

      </div>

      <footer></footer>

   </body>

</html>

CSS:

<style>

         body

	 {

	    padding:0;

	    margin:0;

         }

	  #container

	 {

	    position:relative;

	    width:100%;

	    height:600px;

	    overflow:hidden;		/*这个很重要*/

	 }

	 #car

	 {

	    position:absolute; 		/*汽车在容器中采用绝对定位*/

	    width:400px;

	    height:210px;		/*汽车的总高度，包括轮胎和底盘*/

	    z-index:1;			/*让汽车在背景的上方*/

	    top:300px;			/*距顶端的距离(y轴)*/

	    left:50px;			/*距左侧的距离(x轴)*/

	 }

	  /*车身*/

	 #chassis

	 {

	    position:absolute;

	    width:400px;

	    height:130px;

	    background:#FF9900;

	    border: 2px solid #FF6600;

	 }

	 /*轮胎*/

	 .tire

	 {

	    z-index:1;			/*同上，轮胎也应置于背景的上方*/

	    position:absolute;

	    bottom:0;

	    border-radius:60px;		/*圆半径*/

	    height:120px;		/* 2*radius=height */

	    width:120px;		/* 2*radius=width */

	    background:#0099FF;		/*填充色*/

	    border:1px solid #3300FF;

	    -o-transform:rotate(0deg);	/*旋转(单位：度)*/

	    -ms-transform:rotate(0deg);

	    -webkit-transform:rotate(0deg);

	    -moz-transform:rotate(0deg);

	 }

	 #fronttire

	 {

	    right:20px;		/*设置右边的轮胎距离边缘的距离为20*/

	 }

	 #backtire

	 {

	    left:20px;		/*设置左边的轮胎距离边缘的距离为20*/

	 }

	 #grass

	 {

	    position:absolute;	/*背景绝对定位在容器中*/

	    width:100%;

	    height:130px;

	    bottom:0;

	    /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */

	    background:linear-grdaient(bottom,#33CC00,#66FF22);

	    background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);

	    background:-moz-linear-gradient(bottom,#33CC00,#66FF22);

	    background:-ms-linear-gradient(bottom,#33CC00,#66FF22);

	 }

	 .hr,.vr

	 {

	    position:absolute;

	    background:#3300FF;

	 }

	 .hr

	 {

	    height:1px;

	    width:100%;		/*水平线*/

	    left:0;

	    top:60px;

	 }

	 .vr

	 {

	    width:1px;

	    height:100%;	/*垂直线*/

	    left:60px;

	    top:0;

	 }

      </style>

JS代码：

首先引入在线API：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

实现动画代码（相当简洁）：

<script>

         $(function(){

	     var rot=0;

	     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')));

	     var origin={		/*设置我们的起始点*/

		 left:-400

	     };

	     var animation={		/*该动画由jQuery执行*/

		 left:1600		/*设置我们将移动到的最终位置*/

	 };

	     var rotate=function(){	/*该方法将被旋转的轮子调用*/

		 rot+=2;

		 $('.tire').css(prefix,'rotate('+rot+'deg)');

	 };

	     var options={		/*将要被jQuery使用的参数*/

		 easing:'linear',	/*指定速度，此处只是线性，即为匀速*/

		 duration:10000,	/*指定动画持续时间*/

		 complete:function(){

		    $('#car').css(origin).animate(animation,options);

		 },

		 step:rotate

	 };

	     options.complete();

	  });

      </script>

简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！

本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。

原文：HTTP://blog.csdn.net/yanghua_kobe/article/details/7226816