多學(xué)一點(diǎn)知識(shí)，少寫一行代碼，今天要研究的前端內(nèi)容是動(dòng)畫全解。在flash，安卓，和炫酷的H5頁(yè)面中，所有的動(dòng)畫組成元素?zé)o非就是位移、旋轉(zhuǎn)、縮放、顏色（透明度、亮度、色彩），在時(shí)間軸上的變化。

jquery本身對(duì)元素的動(dòng)畫控制有限。有時(shí)需要有效結(jié)合css、js來實(shí)現(xiàn)動(dòng)畫效果。所以今天我們就來全面了解一下h5前端動(dòng)畫。

css的transition

1）、定義和用法

2）、兼容性

Firefox使用-moz-transition定義、Safari 和 Chrome使用-webkit-transition定義，Opera 使用-o-transition定義。

3）、代碼示例

css3的animation

1）、定義和用法

先使用@keyframes定義一個(gè)動(dòng)畫，再使用animation屬性將該動(dòng)畫綁定到元素上。

2）、兼容性

IE使用@keyframes定義，Firefox使用@-moz-keyframes定義，Safari 和 Chrome使用@-webkit-keyframes定義，Opera使用@-o-keyframes定義。

IE使用animation綁定，Firefox使用-moz-animation綁定，Safari 和 Chrome使用 -webkit-animation綁定Opera使用-o-animation綁定

3）、代碼示例

jQuery的animate

1）、顯示隱藏

hide/show(speed,callback)函數(shù)

2）、透明度

fadeIn/fadeOut(speed,easing,callback)函數(shù)

3）、滑動(dòng)

slideUp/slideDown(speed,callback)會(huì)改變?cè)氐?/span>display屬性

4）、自定義動(dòng)畫

animate({params},speed,callback);

JS的setInterval

原生js利用設(shè)置周期性事件改變?cè)貙傩詫?shí)現(xiàn)動(dòng)畫，復(fù)雜動(dòng)畫的代碼量很大

使用canvas制作動(dòng)畫

使用canvas在瀏覽器上畫圖，并且利用其api，制作動(dòng)畫。canvas使用的地方非常多，尤其是在制作h5小游戲上。

插件

使用通過以上方法封裝好的插件，直接調(diào)用如：waves，textillate.js等等。

引用gif圖片

雖然在工程師的角度上使用gif圖很low，但是，用戶的體驗(yàn)是沒有影響的。