1. Css Sprite：條形圖

條形圖嚴(yán)格的來(lái)說(shuō)也是一種矩形圖，只不過(guò)這個(gè)矩形非常長(zhǎng)，故稱為條形圖。

圖標(biāo)少的時(shí)候到還好，但是圖標(biāo)如果特別多的話，就不太適合放在一行里了，那么為什么還會(huì)有條形圖這個(gè)概念呢？

答案要從動(dòng)畫(huà)開(kāi)始說(shuō)起：

眾所周知，定義一個(gè)動(dòng)畫(huà)最簡(jiǎn)單的方式就是只定義開(kāi)始時(shí)的狀態(tài)和結(jié)束時(shí)的狀態(tài)，中間的狀態(tài)電腦會(huì)自動(dòng)替你計(jì)算。所以如果是條形圖的話只需要定義開(kāi)始時(shí)在哪一個(gè)位置，再定義一個(gè)結(jié)束時(shí)在哪一個(gè)位置就夠了，而且這種圖一看就能知道大概是個(gè)什么樣的動(dòng)畫(huà)。

但是如果要是矩形圖可就麻煩了：

首先乍一看不太容易看出來(lái)大概是一個(gè)什么樣的動(dòng)畫(huà)效果，不如上面那種條形圖一目了然，其次定義動(dòng)畫(huà)時(shí)還要定義運(yùn)行到百分之多少的時(shí)候轉(zhuǎn)到下一行，然后再百分之多少再轉(zhuǎn)，還要計(jì)算出下一行距離上一行的位置。要是這種規(guī)則的倒是還好，最起碼有規(guī)律可循，但是就怕那種復(fù)雜Css Sprite：

可以看到人物與人物之間的間隔并不完全一樣，時(shí)大時(shí)小，這時(shí)候就需要你去一點(diǎn)點(diǎn)的測(cè)量，然后調(diào)試，費(fèi)了半天功夫才能出來(lái)一個(gè)相對(duì)令人滿意的效果。

當(dāng)然條形圖也怕這種間隔不規(guī)律的動(dòng)畫(huà)幀，但是相對(duì)于矩形圖來(lái)說(shuō)無(wú)論是測(cè)量還是調(diào)試都要更加方便一些。

2. 小結(jié)

推薦圖標(biāo)不多并且大小相似的情況下將其排列成條形Css Sprite，這樣的話調(diào)整位置時(shí)只需要關(guān)注橫軸坐標(biāo)，而無(wú)需再計(jì)算縱軸坐標(biāo)了。

條形圖與矩形圖就相當(dāng)于一維與二維之間的聯(lián)系一樣。