你的位置:首页 > 网页设计

[网页设计]HTML5实现动画三种方式


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

HTML5实现动画三种方式

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" >		 <div ></div>		 <div ></div>	   </div>	   <div id="fronttire" >		 <div ></div>		 <div ></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" >		 <div ></div>		 <div ></div>	   </div>	   <div id="fronttire" >		 <div ></div>		 <div ></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