html5 小车动画_HTML5实现动画效果的方式汇总

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

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

(1) canvas元素结合JS

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

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

1.canvashtml代码：

复制代码代码如下:

Animation in HTML5 using the canvas element

Your browser does not support the -element.Please think about updating your brower!

Slower

Play

Faster

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(); //保存当前坐标值以及状态࿰