HTML5实现动画三种方式

HTML5实现动画三种方式

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

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

分三种方式实现:

(1)   canvas元素结合JS

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

(3)   CSS3结合Jquery实现

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

1.canvas

HTML代码:

 


Animation in HTML5 using the canvas element


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






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(); //保存当前坐标值以及状态,对应的类似“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();

    }

由于原理简单,并且代码中作了详细注释,这里就不一一讲解!

2.CSS3

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果:

HTML代码:

<html>



Animations in HTML5 using CSS3 animations


















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;     /*迭代次数-无限次*/
    animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/
 }

 /*车身*/
 #chassis
 {
    position:absolute;
    width:400px;
    height:130px;
    background:#FF9900;
    border: 2px solid #FF6600;
 }

 /*轮胎*/
 .tire
 {
    z-index:1;          /*同上,轮胎也应置于背景的上方*/
    position:absolute;
    bottom:0;
    border-radius:60px;     /*圆半径*/
    height:120px;       /* 2*radius=height */
    width:120px;        /* 2*radius=width */
    background:#0099FF;     /*填充色*/
    border:1px solid #3300FF;

    -webkit-animation-name:tyreAnimation;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;

    -moz-animation-name:tyreAnimation;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;

    -ms-animation-name:tyreAnimation;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-timing-function:linear;       

    animation-name:tyreAnimation;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
 }

 #fronttire
 {
    right:20px;     /*设置右边的轮胎距离边缘的距离为20*/
 }

 #backtire
 {
    left:20px;      /*设置左边的轮胎距离边缘的距离为20*/
 }

 #grass
 {
    position:absolute;  /*背景绝对定位在容器中*/
    width:100%;
    height:130px;
    bottom:0;
    /*让背景色线性渐变,bottom,表示渐变的起始处,第一个颜色值是渐变的起始值,第二个颜色值是终止值 */
    background:linear-grdaient(bottom,#33CC00,#66FF22);
    background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);
    background:-moz-linear-gradient(bottom,#33CC00,#66FF22);
    background:-ms-linear-gradient(bottom,#33CC00,#66FF22); 
 }

 .hr,.vr
 {
    position:absolute;
    background:#3300FF;
 }

 .hr
 {
    height:1px;
    width:100%;     /*轮胎的水平线*/
    left:0;
    top:60px;
 }

 .vr
 {
    width:1px;
    height:100%;    /*轮胎的垂直线*/
    left:60px;
    top:0;
 }

3.JQuery与CSS3

这是一个效果与兼容性俱佳的方式(特别对于IE9暂不支持CSS3而言)

HTML代码(可以看到与CSS3中的HTML代码并无不同):

<html>



Animations in HTML5 using CSS3 animations


















CSS: