歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

HTML5正在變得越來越流行。在這個移動設備日益增長的時代，對來自Adobe的Flash插件的改造需求也正在快速增長。因為就在最近，Adobe宣布Flash將不再支持移動設備。這意味著，Adobe自身也認為對移動設備來講HTML5是一項重要的技術。而桌面系統的改變也是遲早的事。

HTML的一大劣勢就是對於多媒體技術支持的缺乏。在HTML中，你無法直接顯示一個視頻或在屏幕上繪畫。在HTML5中，隨著<video>與<canvas>元素的引進。這些元素給予開發者直接使用“純粹的”HTML來實現多媒體技術的可能性——僅需要寫一些Javascript代碼來配合HTML。在多媒體技術中，有一個基本的技術應該被支持——動畫。在HTML5中，有不少方式能夠實現該功能。

在這篇文章中，我僅將最新的<canvas>元素與即將到來的CSS3動畫技術進行比較。其他的可能性包括DOM元素或SVG元素的創建和動畫。這些可能性將不在本文中進行討論。從開始就應該注意到canvas技術在當前發布的大部分主流浏覽器都給予了支持，而CSS3動畫僅在最新的FireFox與Chrome浏覽器中才有實現的可能，下一個版本的IE也將提供對CSS3動畫的支持。（所以本文中所有演示代碼的效果，在Win 7系統下當前最新版的Chrome浏覽器中都可實現，但在其他操作系統與其他浏覽器中，並不一定能看到所有演示代碼的效果）。

演示地址：http://www.muu.cc/html5/xiaoche

下載地址：

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2012年資料/4月/22日/HTML5 實現小車動畫效果/

這裡我選擇了一個比較簡單的動畫：

PS：由於顯卡、錄制的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！

分三種方式實現：

(1)   canvas元素結合JS

(2)   純粹的CSS3動畫（暫不被所有主流浏覽器支持，比如IE）

(3)   CSS3結合Jquery實現

知道如何使用CSS3動畫比知道如何使用<canvas>元素更重要：因為浏覽器能夠優化那些元素的性能(通常是他們的樣式，比如CSS)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在於，浏覽器使用的硬件主要取決於顯卡的能力。目前，浏覽器沒有給予我們直接訪問顯卡的權力，比如，每一個繪畫操作都不得不在浏覽器中先調用某些函數。

讓我們從Canvas開始

HTML代碼：

  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.          <title>Animation in HTML5 using the canvas element</title>  
  5.     </head>  
  6.    <body onload="init();">  
  7.       <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>  
  8.       <div id="controls">  
  9.          <button type="button" onclick="speed(-0.1);">Slower</button>  
  10.          <button type="button" onclick="play(this);">Play</button>  
  11.      <button type="button" onclick="speed(+0.1)">Faster</button>  
  12.       </div>  
  13.    </body>  
  14. </html>  

JS代碼：

定義一些變量：

  1. var dx=5,           //當前速率   
  2.             rate=1,         //當前播放速度   
  3.             ani,            //當前動畫循環   
  4.             c,              //畫圖(Canvas Context)   
  5.             w,              //汽車[隱藏的](Canvas Context)   
  6.             grassHeight=130,        //背景高度   
  7.             carAlpha=0,         //輪胎的旋轉角度   
  8.             carX=-400,          //x軸方向上汽車的位置(將被改變)   
  9.             carY=300,           //y軸方向上汽車的位置(將保持為常量)   
  10.             carWidth=400,       //汽車的寬度   
  11.             carHeight=130,      //汽車的高度   
  12.             tiresDelta=15,      //從一個輪胎到最接近的汽車底盤的距離   
  13.             axisDelta=20,       //汽車底部底盤的軸與輪胎的距離   
  14.             radius=60;          //輪胎的半徑  

為了實例化汽車canvas(初始時被隱藏)，我們使用下面的自執行的匿名函數

  1. (function(){  
  2.            var car=document.createElement('canvas');    //創建元素   
  3.            car.height=carHeight+axisDelta+radius;   //設置高度   
  4.            car.width=carWidth;              //設置寬度   
  5.            w=car.getContext('2d');  
  6.         })();     
點擊“Play”按鈕，通過定時重復執行“畫汽車”操作，來模擬“幀播放”功能：
  1. function play(s){               //參數s是一個button   
  2.            if(ani){                 //如果ani不為null，則代表我們當前已經有了一個動畫   
  3.               clearInterval(ani);           //所以我們需要清除它(停止動畫)   
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重命名該按鈕為“播放”   
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我們將設置動畫為25fps[幀每秒]，40/1000，即為二十五分之一   
  8.               s.innerHTML='Pause';          //重命名該按鈕為“暫停”   
  9.            }  
  10.         }  
加速，減速，通過以下方法，改變移動距離的大小來實現：
  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  
頁面加載的初始化方法：
  1. //init   
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  
主調方法：
  1. function drawCanvas(){  
  2.            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已顯示的)，避免產生錯誤   
  3.            c.save();                        //保存當前坐標值以及狀態，對應的類似“push”操作   
  4.   
  5.            drawGrass();                     //畫背景   
  6.            c.translate(carX,0);                 //移動起點坐標   
  7.            drawCar();                       //畫汽車(隱藏的canvas)   
  8.            c.drawImage(w.canvas,0,carY);            //畫最終顯示的汽車   
  9.            c.restore();                     //恢復Canvas的狀態，對應的是類似“pop”操作   
  10.            carX+=dx;                        //重置汽車在X軸方向的位置，以模擬向前走   
  11.            carAlpha+=dx/radius;                 //按比例增加輪胎角度   
  12.   
  13.            if(carX>c.canvas.width){              //設置某些定期的邊界條件   
  14.               carX=-carWidth-10;                //也可以將速度反向為dx*=-1;   
  15.            }  
  16.         }  
畫背景：
  1. function drawGrass(){  
  2.            //創建線性漸變，前兩個參數為漸變開始點坐標，後兩個為漸變結束點坐標   
  3.            var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
  4.            //為線性漸變指定漸變色，0表示漸變起始色，1表示漸變終止色   
  5.            grad.addColorStop(0,'#33CC00');  
  6.            grad.addColorStop(1,'#66FF22');  
  7.            c.fillStyle=grad;  
  8.            c.lineWidth=0;  
  9.            c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);  
  10.              
  11.         }  
畫車身：
  1. function drawCar(){  
  2.            w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隱藏的畫板   
  3.            w.strokeStyle='#FF6600';                 //設置邊框色   
  4.            w.lineWidth=2;                       //設置邊框的寬度，單位為像素   
  5.            w.fillStyle='#FF9900';                   //設置填充色   
  6.            w.beginPath();                       //開始繪制新路徑   
  7.            w.rect(0,0,carWidth,carHeight);              //繪制一個矩形   
  8.            w.stroke();                          //畫邊框   
  9.            w.fill();                            //填充背景   
  10.            w.closePath();                       //關閉繪制的新路徑   
  11.            drawTire(tiresDelta+radius,carHeight+axisDelta);     //我們開始畫第一個輪子   
  12.            drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同樣的，第二個   
  13.              
  14.         }  
畫輪胎：
  1. function drawTire(x,y){  
  2.            w.save();  
  3.            w.translate(x,y);  
  4.            w.rotate(carAlpha);  
  5.            w.strokeStyle='#3300FF';  
  6.            w.lineWidth=1;  
  7.            w.fillStyle='#0099FF';  
  8.            w.beginPath();  
  9.            w.arc(0,0,radius,0,2*Math.PI,false);  
  10.            w.fill();  
  11.            w.closePath();  
  12.            w.beginPath();  
  13.            w.moveTo(radius,0);  
  14.            w.lineTo(-radius,0);  
  15.            w.stroke();  
  16.            w.closePath();  
  17.            w.beginPath();  
  18.            w.moveTo(0,radius);  
  19.            w.lineTo(0,-radius);  
  20.            w.stroke();  
  21.            w.closePath();  
  22.            w.restore();  
  23.   
  24.         }  
由於原理簡單，並且代碼中作了詳細注釋，這裡就不一一講解！

Linux編程

jQuery實現數字滾動效果

Android實現炫酷SVG動畫效果

用HTML5 Canvas 做擦除及擴散效果

HTML5-炫麗的時鐘效果Canvas繪圖與動畫基礎練習

jQuery+CSS實現的菜單效果

jQuery實現動畫效果的例子

Android動畫Animation之Tween用代碼實現動畫效果

Android動畫效果Animation之Tween實現簡單動畫

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved