制作動(dòng)態(tài)的網(wǎng)頁是是前端工程師必備的技能，很好的實(shí)現(xiàn)動(dòng)畫能夠極大的提高用戶體驗(yàn)，增強(qiáng)交互效果，那么動(dòng)畫有多少實(shí)現(xiàn)方式，一直對此有選擇恐懼癥的我就總結(jié)一下，以便在開發(fā)的時(shí)候選擇最好的實(shí)現(xiàn)方式。

1.css的transition。

語法：

transition: property duration timing-function delay;

property:填寫需要變化的css屬性如：width,line-height,font-size,color等;

duration:完成過渡效果需要的時(shí)間（2s 或者2000ms）

timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）

timing-delay:動(dòng)畫效果的延遲觸發(fā)時(shí)間（2s 或者2000ms）。

默認(rèn)值分別為：all 0 ease 0

transition抓住了所設(shè)置變化屬性的起始態(tài)和完成態(tài)，通過設(shè)定的速度曲線來完成動(dòng)畫。可以涉及到各種變化的css屬性，默認(rèn)為all，則所有變化的屬性都會(huì)在出發(fā)時(shí)，以動(dòng)畫的形式展現(xiàn)出來。

這種動(dòng)畫方式是css3的，因此ie9以下是不支持的，其他的瀏覽器需要加前綴，并且只有兩態(tài)，不支持自定義中間的狀態(tài)。

例子：

<style type="text/css"> div{width:100px;height:100px;background:red;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}</style><div></div> 

tips：transform是一種變化屬性，該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。可以作為transition中需要變化的屬性。

前綴：

1. transform:rotate(9deg);
2. -ms-transform:rotate(9deg); /* Internet Explorer */
3. -moz-transform:rotate(9deg); /* Firefox */
4. -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
5. -o-transform:rotate(9deg); /* Opera */　　

 2.css3的animation屬性

語法：

animation: name duration timing-function delay iteration-count direction;

name:keyframe的名稱，也就是定義了關(guān)鍵幀的動(dòng)畫的名稱,這個(gè)名稱用來區(qū)別不同的動(dòng)畫。

duration:完成動(dòng)畫所需要的時(shí)間（2s 或者 2000ms）

timing-function:完成動(dòng)畫的速度曲線

delay：動(dòng)畫開始之前的延遲

iteration-count：動(dòng)畫播放次數(shù)

direction：是否輪流反向播放動(dòng)畫（normal:正常順序播放，alternate下一次反向播放）如果把動(dòng)畫設(shè)置為只播放一次，則該屬性沒有效果。

使用animation屬性制作動(dòng)畫可以更加靈活的設(shè)置動(dòng)畫幀，通過不同keyframe（動(dòng)畫幀）的設(shè)置，實(shí)現(xiàn)很多優(yōu)雅的效果，keyframe中的百分?jǐn)?shù)是動(dòng)畫完成總時(shí)間的比例。

animation是設(shè)置總的動(dòng)畫效果，而keyframe中設(shè)置上相應(yīng)的動(dòng)畫名字，然后在keyframe中設(shè)置具體的動(dòng)畫效果。當(dāng)然由于是css3的屬性，仍然需要注意它的兼容性，加上必須的前綴。

例子：

<style> div{    width:100px;    height:100px;    background:red;    position:relative;    animation:mymove 5s infinite;    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{    1% {left:0px;}    20%{left:200px;}    50% {left:300px;}    100%{left:200px;}} @-webkit-keyframes mymove /*Safari and Chrome*/{    1% {left:0px;}    20%{left:200px;}    50% {left:300px;}    100%{left:200px;}}</style> <div></div> 

3.Jquery的animate函數(shù)

語法：

$(selector).animate(styles,options)

styles:產(chǎn)生動(dòng)畫的css樣式和值；

options={   speed:動(dòng)畫的速度（可選參數(shù)：slow,normal,fase）   easing：動(dòng)畫的速度函數(shù)（可選參數(shù)：swing，linear）   callback：動(dòng)畫完成之后要執(zhí)行的函數(shù)；   queue：是否放置在效果隊(duì)列中，是布爾值，為false則立即開始   specialEasing:styles參數(shù)的一個(gè)或多個(gè)屬性映射及對應(yīng)的easing函數(shù)。}

$(myElement).animate({       left: 500,       top: 200}, {duration:'3000',       specialEasing: {            left: 'swing',            top: 'linear'        }}); 

該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫效果。

只有數(shù)字值可創(chuàng)建動(dòng)畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動(dòng)畫（比如 "background-color:red"）。

可以使用的屬性有：（使用比如 "fontSize"來設(shè)置，而非 CSS 名稱（比如 "font-size"））

backgroundPosition，borderWidth，borderBottomWidth，borderLeftWidth

borderRightWidth，borderTopWidth，borderSpacing

margin，marginBottom，marginLeft，marginRight，marginTop

outlineWidth

padding，paddingBottom，paddingLeft，paddingRight，paddingTop

height，width

maxHeight，maxWidth，minHeight，minWidth

font，fontSize

bottom，left，right，top

letterSpacing，wordSpacing，lineHeight，textIndent

可見通過jquery的animation生成動(dòng)畫的過程中可同時(shí)使用多個(gè)屬性，也可以定義相對值（該值相對于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=，如（height:'+=150px'），還可以使用隊(duì)列機(jī)制進(jìn)行步驟式的動(dòng)畫如：

div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow"); 

動(dòng)畫就會(huì)按照順序一步一步實(shí)現(xiàn)，并且不用考慮兼容性，因?yàn)閹缀醵技嫒荨！?/p>

 但是，animate函數(shù)只能夠?qū)崿F(xiàn)一些數(shù)值屬性，能夠?qū)崿F(xiàn)的變化非常有限制，而且使用這個(gè)函數(shù)時(shí)還要配合stop來使用，在達(dá)到某條件時(shí)終止動(dòng)畫，設(shè)置比較復(fù)雜。

4.原生js動(dòng)畫

 原生js動(dòng)畫利用js代碼，將動(dòng)畫一步以函數(shù)的方式寫出來，可以實(shí)現(xiàn)多種動(dòng)畫樣式，而且可以自己做兼容性處理，自己設(shè)立每一步的動(dòng)畫效果，并且能夠完成比較復(fù)雜的效果，但是代碼量很大。如下面的例子：需要自己定義所有的動(dòng)態(tài)函數(shù)，并進(jìn)行計(jì)算、判斷和處理

<div id="odiv" class="odiv">     <div id="sdiv" class="sdiv">     </div></div><script language="javascript">window.onload = function(){     var odiv = document.getElementById('odiv');     odiv.onmouseover = function(){      startMover(0); } odiv.onmouseout = function(){      startMover(-200); }}var timer = null;function startMover(a){//速度和目標(biāo)值     clearInterval(timer);//執(zhí)行當(dāng)前動(dòng)畫同時(shí)清除之前的動(dòng)畫     var odiv = document.getElementById('odiv'); timer = setInterval(function(){     var speed = (a-odiv.offsetLeft)/10;//緩沖動(dòng)畫的速度參數(shù)變化值 //如果速度是大于0，說明是向右走，那么就向上取整     speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor();向下取整     if(odiv.offsetLeft == a){      clearInterval(timer);     } else{      odiv.style.left = odiv.offsetLeft+speed+'px';  } },30);}</script> 

5.插件

網(wǎng)上可以搜到很多封裝好的動(dòng)畫插件，這些插件可以直接引入到頁面中，通過初試話和配置的方式進(jìn)行設(shè)定，直接在頁面中展示動(dòng)畫。

如：waves，textillate.js等等。

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

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

同樣都是使用編碼的方式由前端開發(fā)工程師完成動(dòng)畫效果，canvas要比原生js效率高的多，流暢的多。通過畫筆的方式，能夠輕松的實(shí)現(xiàn)更多的動(dòng)畫效果。

至于canvas如何使用，請看我博客中正在連載的教程--html5 canvas常用api總結(jié)。

 7.引用gif圖片

如果在需求特別緊急，而且動(dòng)畫又特別復(fù)雜的情況下，自己沒有把握按時(shí)實(shí)現(xiàn)效果，或者代價(jià)太大，真的，別猶豫，上gif圖片吧，不要在技術(shù)上糾結(jié)了，雖然在工程師的角度上這樣做很low，但是，用戶的體驗(yàn)是沒有影響的~所以，別糾結(jié)，就是要快！完成最重要了！

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。