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: 代表的是動畫的動作要有幾格,超過會出現白畫面,比原本圖片少的話則可能動作會不連續。

然後就可以看到效果啦。

有興趣可以試試看。

留言