HTML5實(shí)現(xiàn)動(dòng)畫(huà)效果的方式匯總
侵權(quán)舉報(bào)/版權(quán)申訴小編以一個(gè)運(yùn)動(dòng)的小車(chē)為例子，講述了三種實(shí)現(xiàn)HTML5動(dòng)畫(huà)的方式，思路清晰，動(dòng)畫(huà)不僅僅是cava，還有c3和javacip.通過(guò)合理的選擇，來(lái)實(shí)現(xiàn)最優(yōu)的實(shí)現(xiàn)。PS：由于顯卡、錄制的幀間隔，以及可能你電腦處理器的原因，播放過(guò)程可能......
以下是【金聰采編】分享的內(nèi)容全文：
以下是【金聰采編】分享的內(nèi)容全文：
小編以一個(gè)運(yùn)動(dòng)的小車(chē)為例子，講述了三種實(shí)現(xiàn)HTML5動(dòng)畫(huà)的方式，思路清晰，動(dòng)畫(huà)不僅僅是canvas，還有css3和javascript.通過(guò)合理的選擇，來(lái)實(shí)現(xiàn)最優(yōu)的實(shí)現(xiàn)。
PS：由于顯卡、錄制的幀間隔，以及可能你電腦處理器的原因，播放過(guò)程可能有些不太流暢或者失真！
分三種方式實(shí)現(xiàn)：
(1) canvas元素結(jié)合JS
(2) 純粹的CSS3動(dòng)畫(huà)（暫不被所有主流瀏覽器支持，比如IE）
(3) CSS3結(jié)合Jquery實(shí)現(xiàn)
知道如何使用CSS3動(dòng)畫(huà)比知道如何使用<canvas>元素更重要：因?yàn)闉g覽器能夠優(yōu)化那些元素的性能(通常是他們的樣式，比如CSS)，而我們使用canvas自定義畫(huà)出來(lái)的效果卻不能被優(yōu)化。原因又在于，瀏覽器使用的硬件主要取決于顯卡的能力。目前，瀏覽器沒(méi)有給予我們直接訪(fǎng)問(wèn)顯卡的權(quán)力，比如，每一個(gè)繪畫(huà)操作都不得不在瀏覽器中先調(diào)用某些函數(shù)。
1.canvas
html代碼：
復(fù)制代碼
代碼如下:<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代碼：
定義一些變量：
復(fù)制代碼
代碼如下:var dx=5, //當(dāng)前速率
rate=1, //當(dāng)前播放速度
ani, //當(dāng)前動(dòng)畫(huà)循環(huán)
c, //畫(huà)圖(Canvas Context)
w, //汽車(chē)[隱藏的](Canvas Context)
grassHeight=130, //背景高度
carAlpha=0, //輪胎的旋轉(zhuǎn)角度
carX=-400, //x軸方向上汽車(chē)的位置(將被改變)
carY=300, //y軸方向上汽車(chē)的位置(將保持為常量)
carWidth=400, //汽車(chē)的寬度
carHeight=130, //汽車(chē)的高度
tiresDelta=15, //從一個(gè)輪胎到最接近的汽車(chē)底盤(pán)的距離
axisDelta=20, //汽車(chē)底部底盤(pán)的軸與輪胎的距離
radius=60; //輪胎的半徑
為了實(shí)例化汽車(chē)canvas(初始時(shí)被隱藏)，我們使用下面的自執(zhí)行的匿名函數(shù)
復(fù)制代碼
代碼如下:(function(){
var car=document.createElement('canvas'); //創(chuàng)建元素
car.height=carHeight+axisDelta+radius; //設(shè)置高度
car.width=carWidth; //設(shè)置寬度
w=car.getContext('2d');
})();
點(diǎn)擊“Play”按鈕，通過(guò)定時(shí)重復(fù)執(zhí)行“畫(huà)汽車(chē)”操作，來(lái)模擬“幀播放”功能：
復(fù)制代碼
代碼如下:function play(s){ //參數(shù)s是一個(gè)button
if(ani){ //如果ani不為null，則代表我們當(dāng)前已經(jīng)有了一個(gè)動(dòng)畫(huà)
clearInterval(ani); //所以我們需要清除它(停止動(dòng)畫(huà))
ani=null;
s.innerHTML='Play'; //重命名該按鈕為“播放”
}else{
ani=setInterval(drawCanvas,40); //我們將設(shè)置動(dòng)畫(huà)為25fps[幀每秒]，40/1000，即為二十五分之一
s.innerHTML='Pause'; //重命名該按鈕為“暫停”
}
}
加速，減速，通過(guò)以下方法，改變移動(dòng)距離的大小來(lái)實(shí)現(xiàn)：
復(fù)制代碼
代碼如下:function speed(delta){
var newRate=Math.max(rate+delta,0.1);
dx=newRate/rate*dx;
rate=newRate;
}
頁(yè)面加載的初始化方法：
//init
function init(){
c=document.getElementById('canvas').getContext('2d');
drawCanvas();
}
主調(diào)方法：
復(fù)制代碼
代碼如下:function drawCanvas(){
c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已顯示的)，避免產(chǎn)生錯(cuò)誤
c.save(); //保存當(dāng)前坐標(biāo)值以及狀態(tài)，對(duì)應(yīng)的類(lèi)似“push”操作
drawGrass(); //畫(huà)背景
c.translate(carX,0); //移動(dòng)起點(diǎn)坐標(biāo)
drawCar(); //畫(huà)汽車(chē)(隱藏的canvas)
c.drawImage(w.canvas,0,carY); //畫(huà)最終顯示的汽車(chē)
c.restore(); //恢復(fù)Canvas的狀態(tài)，對(duì)應(yīng)的是類(lèi)似“pop”操作
carX+=dx; //重置汽車(chē)在X軸方向的位置，以模擬向前走
carAlpha+=dx/radius; //按比例增加輪胎角度
if(carX>c.canvas.width){ //設(shè)置某些定期的邊界條件
carX=-carWidth-10; //也可以將速度反向?yàn)閐x*=-1;
}
}
畫(huà)背景：
復(fù)制代碼
代碼如下:function drawGrass(){
//創(chuàng)建線(xiàn)性漸變，前兩個(gè)參數(shù)為漸變開(kāi)始點(diǎn)坐標(biāo)，后兩個(gè)為漸變結(jié)束點(diǎn)坐標(biāo)
var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);
//為線(xiàn)性漸變指定漸變色，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);
}
畫(huà)車(chē)身：
復(fù)制代碼
代碼如下:function drawCar(){
w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隱藏的畫(huà)板
w.strokeStyle='#FF6600'; //設(shè)置邊框色
w.lineWidth=2; //設(shè)置邊框的寬度，單位為像素
w.fillStyle='#FF9900'; //設(shè)置填充色
w.beginPath(); //開(kāi)始繪制新路徑
w.rect(0,0,carWidth,carHeight); //繪制一個(gè)矩形
w.stroke(); //畫(huà)邊框
w.fill(); //填充背景
w.closePath(); //關(guān)閉繪制的新路徑
drawTire(tiresDelta+radius,carHeight+axisDelta); //我們開(kāi)始畫(huà)第一個(gè)輪子
drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同樣的，第二個(gè)
}
畫(huà)輪胎：
復(fù)制代碼
代碼如下: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();
}
由于原理簡(jiǎn)單，并且代碼中作了詳細(xì)注釋?zhuān)@里就不一一講解！
2.CSS3
你將看到我們未通過(guò)一句JS代碼就完全實(shí)現(xiàn)了和上面一樣的動(dòng)畫(huà)效果：
HTML代碼：
復(fù)制代碼
代碼如下:<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>
<div class="vr"></div>
</div>
</div>
<div id="grass"></div>
</div>
<footer></footer>
</body>
</html>
CSS代碼：
body
{
padding:0;
margin:0;
}
定義車(chē)身與輪胎轉(zhuǎn)到的動(dòng)畫(huà)（你會(huì)看到基本每一個(gè)動(dòng)畫(huà)都有四個(gè)版本的定義：原生版本/webkit【Chrome|Safari】/ms【為了向后兼容IE10】/moz【FireFox】）
復(fù)制代碼
代碼如下:/*定義動(dòng)畫(huà)：從-400px的位置移動(dòng)到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; /*這個(gè)很重要*/
}
#car
{
position:absolute; /*汽車(chē)在容器中采用絕對(duì)定位*/
width:400px;
height:210px; /*汽車(chē)的總高度，包括輪胎和底盤(pán)*/
z-index:1; /*讓汽車(chē)在背景的上方*/
top:300px; /*距頂端的距離(y軸)*/
left:50px; /*距左側(cè)的距離(x軸)*/
/*以下內(nèi)容賦予該元素預(yù)先定義的動(dòng)畫(huà)及相關(guān)屬性*/
-webkit-animation-name:carAnimation; /*名稱(chēng)*/
-webkit-animation-duration:10s; /*持續(xù)時(shí)間*/
-webkit-animation-iteration-count:infinite; /*迭代次數(shù)-無(wú)限次*/
-webkit-animation-timing-function:linear; /*播放動(dòng)畫(huà)時(shí)從頭到尾都以相同的速度*/
-moz-animation-name:carAnimation; /*名稱(chēng)*/
-moz-animation-duration:10s; /*持續(xù)時(shí)間*/
-moz-animation-iteration-count:infinite; /*迭代次數(shù)-無(wú)限次*/
-moz-animation-timing-function:linear; /*播放動(dòng)畫(huà)時(shí)從頭到尾都以相同的速度*/
-ms-animation-name:carAnimation; /*名稱(chēng)*/
-ms-animation-duration:10s; /*持續(xù)時(shí)間*/
-ms-animation-iteration-count:infinite; /*迭代次數(shù)-無(wú)限次*/
-ms-animation-timing-function:linear; /*播放動(dòng)畫(huà)時(shí)從頭到尾都以相同的速度*/
animation-name:carAnimation; /*名稱(chēng)*/
animation-duration:10s; /*持續(xù)時(shí)間*/
animation-iteration-count:infinite; /*迭代次數(shù)-無(wú)限次*/
animation-timing-function:linear; /*播放動(dòng)畫(huà)時(shí)從頭到尾都以相同的速度*/
}
/*車(chē)身*/
#chassis
{
position:absolute;
width:400px;
height:130px;
background:#FF9900;
border: 2px solid #FF6600;
}
/*輪胎*/
.tire
{
z-index:1; /*同上，輪胎也應(yīng)置于背景的上方*/
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; /*設(shè)置右邊的輪胎距離邊緣的距離為20*/
}
#backtire
{
left:20px; /*設(shè)置左邊的輪胎距離邊緣的距離為20*/
}
#grass
{
position:absolute; /*背景絕對(duì)定位在容器中*/
width:100%;
height:130px;
bottom:0;
/*讓背景色線(xiàn)性漸變,bottom,表示漸變的起始處，第一個(gè)顏色值是漸變的起始值，第二個(gè)顏色值是終止值 */
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%; /*輪胎的水平線(xiàn)*/
left:0;
top:60px;
}
.vr
{
width:1px;
height:100%; /*輪胎的垂直線(xiàn)*/
left:60px;
top:0;
}
3.JQuery與CSS3
這是一個(gè)效果與兼容性俱佳的方式（特別對(duì)于IE9暫不支持CSS3而言）
HTML代碼（可以看到與CSS3中的HTML代碼并無(wú)不同）：
復(fù)制代碼
代碼如下:<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>
<div class="vr"></div>
</div>
</div>
<div id="grass"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
<style>
body
{
padding:0;
margin:0;
}
#container
{
position:relative;
width:100%;
height:600px;
overflow:hidden; /*這個(gè)很重要*/
}
#car
{
position:absolute; /*汽車(chē)在容器中采用絕對(duì)定位*/
width:400px;
height:210px; /*汽車(chē)的總高度，包括輪胎和底盤(pán)*/
z-index:1; /*讓汽車(chē)在背景的上方*/
top:300px; /*距頂端的距離(y軸)*/
left:50px; /*距左側(cè)的距離(x軸)*/
}
/*車(chē)身*/
#chassis
{
position:absolute;
width:400px;
height:130px;
background:#FF9900;
border: 2px solid #FF6600;
}
/*輪胎*/
.tire
{
z-index:1; /*同上，輪胎也應(yīng)置于背景的上方*/
position:absolute;
bottom:0;
border-radius:60px; /*圓半徑*/
height:120px; /* 2*radius=height */
width:120px; /* 2*radius=width */
background:#0099FF; /*填充色*/
border:1px solid #3300FF;
-o-transform:rotate(0deg); /*旋轉(zhuǎn)(單位：度)*/
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
}
#fronttire
{
right:20px; /*設(shè)置右邊的輪胎距離邊緣的距離為20*/
}
#backtire
{
left:20px; /*設(shè)置左邊的輪胎距離邊緣的距離為20*/
}
#grass
{
position:absolute; /*背景絕對(duì)定位在容器中*/
width:100%;
height:130px;
bottom:0;
/*讓背景色線(xiàn)性漸變,bottom,表示漸變的起始處，第一個(gè)顏色值是漸變的起始值，第二個(gè)顏色值是終止值 */
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%; /*水平線(xiàn)*/
left:0;
top:60px;
}
.vr
{
width:1px;
height:100%; /*垂直線(xiàn)*/
left:60px;
top:0;
}
</style>
JS代碼：
首先引入在線(xiàn)API：
復(fù)制代碼
代碼如下:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
實(shí)現(xiàn)動(dòng)畫(huà)代碼（相當(dāng)簡(jiǎn)潔）：
復(fù)制代碼
代碼如下:<script>
$(function(){
var rot=0;
var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));
var origin={ /*設(shè)置我們的起始點(diǎn)*/
left:-400
};
var animation={ /*該動(dòng)畫(huà)由jQuery執(zhí)行*/
left:1600 /*設(shè)置我們將移動(dòng)到的最終位置*/
};
var rotate=function(){ /*該方法將被旋轉(zhuǎn)的輪子調(diào)用*/
rot+=2;
$('.tire').css(prefix,'rotate('+rot+'deg)');
};
var options={ /*將要被jQuery使用的參數(shù)*/
easing:'linear', /*指定速度，此處只是線(xiàn)性，即為勻速*/
duration:10000, /*指定動(dòng)畫(huà)持續(xù)時(shí)間*/
complete:function(){
$('#car').css(origin).animate(animation,options);
},
step:rotate
};
options.complete();
});
</script>
簡(jiǎn)單講解：prefix首先識(shí)別出當(dāng)前是哪個(gè)定義被采用了（-o?-moz?-webkit?-ms?），然后定義了動(dòng)畫(huà)的起點(diǎn)位置和終點(diǎn)位置。接 著，定義了設(shè)置旋轉(zhuǎn)角度的函數(shù)（該函數(shù)將在在動(dòng)畫(huà)的每一步(step)中執(zhí)行）。然后，定義了一個(gè)動(dòng)畫(huà)，該定義方式導(dǎo)致了無(wú)限自循環(huán)調(diào)用！
本文，通過(guò)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)實(shí)例，演示了HTML5下，實(shí)現(xiàn)動(dòng)畫(huà)的幾種常見(jiàn)方式。
