HTML5实现动画效果的⽅式汇总
⼩编以⼀个运动的⼩车为例⼦，讲述了三种实现HTML5动画的⽅式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。
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 ateElement('canvas'); //创建元素
car.height=carHeight+axisDelta+radius; //设置⾼度
car.width=carWidth; //设置宽度
Context('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(){
ElementById('canvas').getContext('2d');
drawCanvas();
}
主调⽅法：
复制代码
代码如下:
function drawCanvas(){
c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显⽰的)，避免产⽣错误
c.save(); //保存当前坐标值以及状态，对应的类似“push”操作
drawGrass(); //画背景
drawCar(); //画汽车(隐藏的canvas)
c.drawImage(w.canvas,0,carY); //画最终显⽰的汽车
carX+=dx; //重置汽车在X轴⽅向的位置，以模拟向前⾛
carAlpha+=dx/radius; //按⽐例增加轮胎⾓度
if(carX>c.canvas.width){ //设置某些定期的边界条件
carX=-carWidth-10; //也可以将速度反向为dx*=-1;
}
}
画背景：
复制代码
代码如下:
function drawGrass(){
//创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标
var ateLinearGradient(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(); //开始绘制新路径
<(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.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.lineTo(-radius,0);
w.stroke();
w.closePath();
w.beginPath();
w.lineTo(0,-radius);
w.stroke();
w.closePath();
}
由于原理简单，并且代码中作了详细注释，这⾥就不⼀⼀讲解！
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" class="tire">
<div class="hr"></div>
<div class="vr"></div>
</div>
<div id="fronttire" class="tire">
<div class="hr"></div>
js控制css3动画触发<div class="vr"></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; /*迭代次数-⽆限次*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。