小編以乙個運動的小車為例子,講述了三種實現html5動畫的方式,思路清晰,動畫不僅僅是canvas,還有css3和j**ascript.通過合理的選擇,來實現最優的實現。
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())();
點選「play」按鈕,通過定時重複執行「畫汽車」操作,來模擬「幀**」功能:
複製**
**如下:
function play(s)else
} 加速,減速,通過以下方法,改變移動距離的大小來實現:
複製**
**如下:
function speed(delta)
頁面載入的初始化方法:
//init
function init()
主調方法:
複製**
**如下:
function drawcanvas()
} 畫背景:
複製**
**如下:
function drawgrass()
畫車身:
複製**
**如下:
function drawcar()
畫輪胎:
複製**
**如下:
function drawtire(x,y)
由於原理簡單,並且**中作了詳細注釋,這裡就不一一講解!
2.css3
你將看到我們未通過一句js**就完全實現了和上面一樣的動畫效果:
html**:
複製**
**如下:
animations in html5 using css3 animations
css**:
body
定義車身與輪胎轉到的動畫(你會看到基本每乙個動畫都有四個版本的定義:原生版本/webkit【chrome|safari】/ms【為了向後相容ie10】/moz【firefox】)
複製**
**如下:
/*定義動畫:從-400px的位置移動到1600px的位置 */
@keyframes caranimation
/* 指定初始位置,0%等同於from*/
100% /* 指定最終位置,100%等同於to*/
} /* safari and chrome */
@-webkit-keyframes caranimation
100%
} /* firefox */
@-moz-keyframes caranimation
100%
} /*ie暫不支援,此處定義是為了向後相容ie10*/
@-ms-keyframes caranimation
100%
} @keyframes tyreanimation
100%
} @-webkit-keyframes tyreanimation
100%
} @-moz-keyframes tyreanimation
100%
} @-ms-keyframes tyreanimation
100%
} #container
#car
/*車身*/
#chassis
/*輪胎*/
.tire
#fronttire
#backtire
#grass
.hr,.vr
.hr
.vr
3.jquery與css3
這是乙個效果與相容性俱佳的方式(特別對於ie9暫不支援css3而言)
html**(可以看到與css3中的html**並無不同):
複製**
**如下:
animations in html5 using css3 animations
css:
js**:
首先引入**api:
複製**
**如下:
實現動畫**(相當簡潔):
複製**
**如下:
簡單講解:prefix首先識別出當前是哪個定義被採用了(-o?-moz?-webkit?-ms?),然後定義了動畫的起點位置和終點位置。接 著,定義了設定旋轉角度的函式(該函式將在在動畫的每一步(step)中執行)。然後,定義了乙個動畫,該定義方式導致了無限自迴圈呼叫!
本文,通過乙個簡單的動畫例項,演示了html5下,實現動畫的幾種常見方式。
本文標題: html5實現動畫效果的方式彙總
本文位址:
html5實現刮刮卡效果
通過canvas實現的可刮塗層效果.修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式.塗層 可刮效果 以下是html源 已增加移動裝置支援 12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果,最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation,這個屬性有多個值,而實現刮獎效果要用到的值就是destination out。意思就是 在已有...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果,最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation,這個屬性有多個值,而實現刮獎效果要用到的值就是destination out。意思就是 在已有...