【分享】翻出過去的一個多彩泡泡屏保特效(JS+CSS版)

　　整理檔案時翻出一個好久前做的泡泡屏保的特效，純JS+CSS做的。回想了下，是去年年初時看見XP下那個流行的泡泡屏保，突然想移植到JS版本來。但有做著才發現有不少麻煩的問題解決不好，於是沒繼續。

　　 

　　DEMO： http://www.etherdream.com/funnyscript/bubbles/   

　　

　　和XP系統內建的那個屏保一樣，從螢幕一個角落裡冒出很多泡泡，然後在螢幕裡碰撞反彈。泡泡有著半透明的漸層色，並且顏色也是在不停的變換。

 　　

　　當時這個效果分析了不少時間。如果是用flash那就再簡單不過了，把泡泡蒙板的灰色通道複製到一個純色的背景層的Alpha通道就可以了。但是網頁裡除非用HTML5的canvas，單憑純粹的CSS還沒那麼強大的位元影像處理能力。在CSS裡，和透明度有關的道具也只有這幾個：png圖片，css alpha值，rgba()，chroma濾鏡，mask濾鏡，AlphaImageLoader濾鏡，以及CSS3的漸層。

　　

　　

 

　　你也許會說，這不是很簡單，給png圖片層設定各種background-color，不就可以實現顏色的變換了嗎。事實上，背景色不但混合到了半透明像素中，連泡泡外的四個邊角也給填充了，這樣就成了方塊，而不是泡泡了，並且顏色也不正確。顯然沒有這麼簡單。

　　

　　因為泡泡是半透明漸層的材質，chroma和mask這些過濾單色的濾鏡都派不上用場。而rgba的背景色同樣也會出現多餘的背景。 AlphaImageLoader濾鏡經測試，實際顯示出來的圖片在background之上， 與<img>載入png效果一樣。而CSS3的漸層和本例的蒙板配合起來比較困難，而且相容性也有問題。

 　　

　　本例的困難之處在於：圖片本身不僅是半透明漸層的，並且這些漸層點的顏色還能通過指令碼改變。考慮了很久，既然沒有一個簡便的方法，那不如就用複雜的吧~

 

　　大家都知道，顏色都是RGB組成的，調整3種原色的比例，就可以變出各種顏色。我們不妨把灰色蒙板事先填入R,G,B三種純色，儲存為3張圖片。這樣就有了100%的紅色泡泡，綠色泡泡，藍色泡泡。把他們疊在同個位置，然後給3張圖片設定不同的css alpha值，於是就有了各種顏色的泡泡，並且半透明的像素仍然保留！

　　

　　

 

　　 於是這個彩色的問題就解決了。不過值得注意的是，藍色位於最頂層，而紅色則是最底層。即使是紅色層100%的不透明，也會被藍色和綠色層的PNG層層剝削，很明顯的減淡。所以實際顯示時，還需給藍和綠層分別加個權值，以保證紅色通道不會那麼的微弱，而藍的那麼的明顯。不過在IE裡的顯示效果仍是藍色很明顯，不知道IE的透明度計算方式和標準瀏覽器有什麼不同。。。 (2010/2/1)

 

　　後續：當時對ie的mask濾鏡理解不對，mask濾鏡並非是單色的過濾，而是：用指定的RGB顏色替換容器內所有點的RGB，並且Alpha'=255 - Alpha。所以ie下只要把蒙板圖片的Alpha通道取反，然後同時用AlphaImageLoader和Mask濾鏡，即可達到效果，Mask濾鏡的color參數就是泡泡的顏色。另在Webkit核心的瀏覽器下，可以使用-webkit-mask-image直接應用一個圖片蒙板！（2011/11/10）