HTML5實現動畫效果的方式總結 _html5教學技巧

小編以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是canvas，還有css3和javascript.透過合理的選擇，來實現最優的實現。

PS：由於顯示卡、錄製的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或失真！
以三種方式實現：
(1) canvas元素結合JS
(2) 純粹的CSS3動畫（暫不被所有主流瀏覽器支持，例如IE）
(3) CSS3結合Jquery實作
知道如何使用CSS3動畫比知道如何使用元素更重要：因為瀏覽器能夠優化那些元素的效能(通常是他們的樣式，例如CSS)，而我們使用canvas自訂畫出來的效果卻不能被優化。原因又在於，瀏覽器所使用的硬體主要取決於顯示卡的能力。目前，瀏覽器並沒有給予我們直接存取顯示卡的權力，例如，每一個繪畫操作都必須在瀏覽器中先呼叫某些函數。
1.canvas
html程式碼：

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製碼

程式碼如下:

Your browser does not support the <canvas></canvas>-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() ;
}

主調方法：

複製程式碼程式碼如下：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>c.fillRect(0,c.canvas.height-grassHeight,c.canvas>c.fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight);
}



畫車身：

複製程式碼

程式碼如下:

程式碼如下:

代碼如下: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); /相同的，第二
}

畫輪胎：

複製代碼

代碼如下:

代碼如下:



代碼如下:



代碼如下：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代碼：

複製程式碼程式碼如下:

in HTML5 using CSS3 animations
head>

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 ty{left:1600px; }
} @keyframes tyreAn >{
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
}
@-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:infiniteration; /*迭代次數-無限次*/
-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;
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-remation-name: ;
-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(botlinear-gradient(bottom,linear-gradient(bot) #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程式碼並沒有不同）：

複製程式碼

程式碼如下:

程式碼如下:






in HTML5 using CSS3 animations
head>

CSS:

.vr {

width:1px; height:100 %; /*垂直線*/
left:60px; top:0;
}

JS代碼：

首先引入在線API：

複製代碼

代碼如下:

實作動畫程式碼（相當簡潔）：

複製程式碼程式碼如下:

<script> <br />$(function(){ <br />var rot=0; <br />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'))); <br />var origin={ / *設定我們的起始點*/ <br />left:-400 <br />}; <br />var animation={ /*該動畫由jQuery執行*/ <br />left:1600 /*設定我們將移動到的最終位置*/ <br />}; <br />var rotate=function(){ /*該方法將被旋轉的輪子呼叫*/ <br />rot =2; <br />$('.tire').css (prefix,'rotate(' rot 'deg)'); <br />}; <br />var options={ /*將要被jQuery使用的參數*/ <br />easing:'linear', /*指定速度，這裡只是線性，即為勻速*/ <br />duration:10000, /*指定動畫持續時間*/ <br />complete:function(){ <br />$('#car').css(origin). animate(animation,options); <br />}, <br />step:rotate <br />}; <br />options.complete(); <br />}); <br /></script>

簡單解說：prefix先辨識出目前是哪個定義被採用了（-o?-moz?-webkit?-ms?），然後定義了動畫的起點位置和終點位置。接 著，定義了設定旋轉角度的函數（該函數將在動畫的每一步(step)中執行）。然後，定義了一個動畫，該定義方式導致了無限自循環呼叫！
本文，透過一個簡單的動畫實例，示範了HTML5下，實現動畫的幾種常見方式。