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,
- w,
- grassHeight=130,
- carAlpha=0,
- carX=-400,
- carY=300,
- 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){
- if(ani){
- clearInterval(ani);
- ani=null;
- s.innerHTML='Play';
- }else{
- ani=setInterval(drawCanvas,40);
- s.innerHTML='Pause';
- }
- }
加速,减速,通过以下方法,改变移动距离的大小来实现:
- function speed(delta){
- var newRate=Math.max(rate+delta,0.1);
- dx=newRate/rate*dx;
- rate=newRate;
- }
页面加载的初始化方法:
-
- function init(){
- c=document.getElementById('canvas').getContext('2d');
- drawCanvas();
- }
主调方法:
- function drawCanvas(){
- c.clearRect(0,0,c.canvas.width, c.canvas.height);
- c.save();
-
- drawGrass();
- c.translate(carX,0);
- drawCar();
- c.drawImage(w.canvas,0,carY);
- c.restore();
- carX+=dx;
- carAlpha+=dx/radius;
-
- if(carX>c.canvas.width){
- carX=-carWidth-10;
- }
- }
画背景:
- function drawGrass(){
-
- var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);
-
- 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();
-
- }
由于原理简单,并且代码中作了详细注释,这里就不一一讲解!