HTML5 实现小车动画效果(Canvas/CSS3/JQuery)


HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。

HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。

在这篇文章中，我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。（所以本文中所有演示代码的效果，在Win 7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果）。

演示地址：http://www.muu.cc/html5/xiaoche

下载地址：

免费下载地址在 http://linux.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2012年资料/4月/22日/HTML5 实现小车动画效果/

这里我选择了一个比较简单的动画：

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

分三种方式实现：

(1)   canvas元素结合JS

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

(3)   CSS3结合Jquery实现

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

让我们从Canvas开始

HTML代码：

  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.          <title>Animation in HTML5 using the canvas element</title>  
  5.     </head>  
  6.    <body onload="init();">  
  7.       <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>  
  8.       <div id="controls">  
  9.          <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代码：

定义一些变量：

  1. var dx=5,           //当前速率   
  2.             rate=1,         //当前播放速度   
  3.             ani,            //当前动画循环   
  4.             c,              //画图(Canvas Context)   
  5.             w,              //汽车[隐藏的](Canvas Context)   
  6.             grassHeight=130,        //背景高度   
  7.             carAlpha=0,         //轮胎的旋转角度   
  8.             carX=-400,          //x轴方向上汽车的位置(将被改变)   
  9.             carY=300,           //y轴方向上汽车的位置(将保持为常量)   
  10.             carWidth=400,       //汽车的宽度   
  11.             carHeight=130,      //汽车的高度   
  12.             tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离   
  13.             axisDelta=20,       //汽车底部底盘的轴与轮胎的距离   
  14.             radius=60;          //轮胎的半径  

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

  1. (function(){  
  2.            var car=document.createElement('canvas');    //创建元素   
  3.            car.height=carHeight+axisDelta+radius;   //设置高度   
  4.            car.width=carWidth;              //设置宽度   
  5.            w=car.getContext('2d');  
  6.         })();     
点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
  1. function play(s){               //参数s是一个button   
  2.            if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画   
  3.               clearInterval(ani);           //所以我们需要清除它(停止动画)   
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重命名该按钮为“播放”   
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一   
  8.               s.innerHTML='Pause';          //重命名该按钮为“暂停”   
  9.            }  
  10.         }  
加速，减速，通过以下方法，改变移动距离的大小来实现：
  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  
页面加载的初始化方法：
  1. //init   
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  
主调方法：
  1. function drawCanvas(){  
  2.            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误   
  3.            c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作   
  4.   
  5.            drawGrass();                     //画背景   
  6.            c.translate(carX,0);                 //移动起点坐标   
  7.            drawCar();                       //画汽车(隐藏的canvas)   
  8.            c.drawImage(w.canvas,0,carY);            //画最终显示的汽车   
  9.            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.         }  
画背景：
  1. function drawGrass(){  
  2.            //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标   
  3.            var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
  4.            //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色   
  5.            grad.addColorStop(0,'#33CC00');  
  6.            grad.addColorStop(1,'#66FF22');  
  7.            c.fillStyle=grad;  
  8.            c.lineWidth=0;  
  9.            c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);  
  10.              
  11.         }  
画车身：
  1. function drawCar(){  
  2.            w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板   
  3.            w.strokeStyle='#FF6600';                 //设置边框色   
  4.            w.lineWidth=2;                       //设置边框的宽度，单位为像素   
  5.            w.fillStyle='#FF9900';                   //设置填充色   
  6.            w.beginPath();                       //开始绘制新路径   
  7.            w.rect(0,0,carWidth,carHeight);              //绘制一个矩形   
  8.            w.stroke();                          //画边框   
  9.            w.fill();                            //填充背景   
  10.            w.closePath();                       //关闭绘制的新路径   
  11.            drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子   
  12.            drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个   
  13.              
  14.         }  
画轮胎：
  1. function drawTire(x,y){  
  2.            w.save();  
  3.            w.translate(x,y);  
  4.            w.rotate(carAlpha);  
  5.            w.strokeStyle='#3300FF';  
  6.            w.lineWidth=1;  
  7.            w.fillStyle='#0099FF';  
  8.            w.beginPath();  
  9.            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.         }  
由于原理简单，并且代码中作了详细注释，这里就不一一讲解！
  • 1
  • 2
  • 3
  • 下一页

相关内容