jQuery的CSS Sprite動畫

昨天(2011/5/11)很多人應該都有看到google首頁的動畫，如果有去看他的原始檔的話，應該會發現他不是使用gif或swf等的動畫格式，而是用CSS的Sprite方式搭配javascript去製作，CSS的Sprite算是css裡面很好用的一個技巧，簡單的說就是用一張圖，以改變背景位置方式去組成一個網頁，很常用在按鈕hover後的變化效果，好處是因為只讀取一次圖片，所以可以加快處理的速度。

比如說上一個on/off的checkbox效果就有用到這個方法。


而把這個方法用javascript變成動畫的好處就更多啦，一個是可以避免gif那只有256色醜醜的樣子，還有用png的話還可以支援半透明效果，再來就是iOS都不支援swf，所以會這個方法的話，在網頁想要放動畫的話就可以多一個選擇了。

很開心的我在jQuery找到這樣的外掛。

他一方面可以做上述的sprite動畫，一方面也可以做移動動畫。

首先你要準備一張像這樣的圖。


做動畫不難，之前在做的時候麻煩的反而是把圖併成這樣，還好我之前也有找到用php搭配imagemagick的方法來接圖..XD

然後記得要引入jquery.js還有外掛的那支jquery.spritely-0.1.js。

之後套起來就很簡單啦，先幫你要放動畫的地方給一個id吧。

給他一個樣式
#cat{
position:absolute;
width: 176px;
height: 193px;
background: transparent url(walks.png) 0 0 no-repeat;
}
雖然圖片很長，可是用限制width跟height的方法就可以讓圖片只在一個範圍內顯示。

然後再把你要做動畫的id指定給jquery吧
$('#cat').sprite({fps: 8, no_of_frames: 8});
fps: 代表的是每秒有幾格，格數越多代表動畫跑得越快。
no_of_frames: 代表的是動畫的動作要有幾格，超過會出現白畫面，比原本圖片少的話則可能動作會不連續。

然後就可以看到效果啦。

有興趣可以試試看。