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
下载地址：
具体下载目录在 /2012年资料/4月/22日/HTML5 实现小车动画效果/
这里我选择了一个比较简单的动画：
PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！
分三种方式实现：
(1) canvas元素结合JS
(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从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');
- })();
- 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();
- }
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...