本發(fā)明涉及一種動畫效果的實現(xiàn)方法。特別是涉及一種網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法。
背景技術(shù)：
隨著互聯(lián)網(wǎng)的蓬勃發(fā)展和html5技術(shù)的興起，html5技術(shù)為網(wǎng)頁提供了音頻、視頻、動畫等各種多媒體表現(xiàn)手段，網(wǎng)頁不再是單純的靜態(tài)的網(wǎng)頁，里面還包含有音頻、視頻、動畫等多媒體，給用戶帶來更好的體驗，但與此同時也帶來了一些問題，如資源越來越大、消耗的帶寬越來越多、客戶端瀏覽器上消耗的內(nèi)存越來越多，特別是在硬件配置不高的電視盒子、手機在加載動畫的時候，可能出現(xiàn)卡頓、甚至閃退，這個時候就需要考慮消耗硬件資源低的動畫實現(xiàn)方案。
現(xiàn)有技術(shù)是采用javascript腳本語言編寫動畫。動畫由多個幀圖片組成，由javascript語言控制幀圖片的展示，從而實現(xiàn)動畫的播放。其存在如下不足：
1、需要很多的幀圖片，對網(wǎng)絡(luò)帶寬有很高的要求；
2、javascript在播放幀動畫的時候，會消耗較多的硬件資源，需要硬件配置較高。
技術(shù)實現(xiàn)要素：
本發(fā)明所要解決的技術(shù)問題是，提供一種應(yīng)用效果好的網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法。
本發(fā)明所采用的技術(shù)方案是：一種網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法，包括如下步驟：
1)把網(wǎng)頁動畫的畫面分為若干個靜止部分和若干個動態(tài)部分；
2)用若干個矩形框框住動態(tài)部分；
3)把用矩形框框住的部分分別做成gif格式的動態(tài)圖片；
4)利用網(wǎng)頁的布局css的position屬性，把gif格式的動態(tài)圖片精準(zhǔn)的放到對應(yīng)的矩形框內(nèi)，形成若干個新的動態(tài)部分；
5)將若干個新的動態(tài)部分與步驟1)中的若干個靜止部分組合，完成網(wǎng)頁的動畫效果。
步驟1)所述的靜止的部分就是畫面固定不變的部分；動態(tài)的部分就是畫面動態(tài)改變的部分。
步驟3)在做成gif格式的動態(tài)圖片過程中，要把框里的所有內(nèi)容都做成gif格式的動態(tài)圖片。
本發(fā)明的一種網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法，解決了配置不高的終端(電視盒子、手機)上運行動畫卡頓、閃退的問題。本發(fā)明的方法能夠在配置不高的電視盒子、手機上運行動畫效果，增加了交互性，給用戶更好地體驗。
具體實施方式
下面結(jié)合實施例對本發(fā)明的一種網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法做出詳細(xì)說明。
本發(fā)明的一種網(wǎng)頁上的節(jié)省網(wǎng)絡(luò)資源的動畫效果的實現(xiàn)方法，包括如下步驟：
1)把網(wǎng)頁動畫的畫面分為若干個靜止部分和若干個動態(tài)部分；所述的靜止的部分就是畫面固定不變的部分例如遠(yuǎn)山；動態(tài)的部分就是畫面動態(tài)改變的部分，如人物的胡須隨風(fēng)飄動。
2)用若干個矩形框框住動態(tài)部分，所述的矩形框盡可能??；之所以要求矩形框盡可能小，是因為gif格式的動態(tài)圖片存儲起來比一般靜態(tài)圖片大的多；用盡可能小的矩形框去框住網(wǎng)頁畫面動態(tài)的部分，gif動態(tài)圖片作的就越小，就越節(jié)省網(wǎng)絡(luò)帶寬和加載圖片的時間。
3)把用矩形框框住的部分分別做成gif格式的動態(tài)圖片；在做成gif格式的動態(tài)圖片過程中，要把框里的所有內(nèi)容都做成gif格式的動態(tài)圖片，否則就會有很難看的白邊，明顯看出圖片之間不融洽。
4)利用網(wǎng)頁的布局css的position屬性，把gif格式的動態(tài)圖片精準(zhǔn)的放到對應(yīng)的矩形框內(nèi)，形成若干個新的動態(tài)部分；
5)將若干個新的動態(tài)部分與步驟1)中的若干個靜止部分組合，完成網(wǎng)頁的動畫效果。