[發明專利]一種網頁上的節省網絡資源的動畫效果的實現方法

有效

• 申請號: 201710206619.1
• 申請日: 2017-03-31
• 公開（公告）號: CN106991162B
• 公開（公告）日: 2020-07-28
• 發明（設計）人: 沈偉;石元彬;彭駿勇;呂國財
• 申請（專利權）人: 未來電視有限公司;優地技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958;G06T13/00
• 代理公司: 天津市北洋有限責任專利代理事務所 12201
• 代理人: 杜文茹

一種網頁上的節省網絡資源的動畫效果的實現方法，包括：把網頁動畫的畫面分為若干個靜止部分和若干個動態部分；用若干個矩形框框住動態部分；把用矩形框框住的部分分別做成gif格式的動態圖片；利用網頁的布局css的position屬性，把gif格式的動態圖片精準的放到對應的矩形框內，形成若干個新的動態部分；將若干個新的動態部分與若干個靜止部分組合，完成網頁的動畫效果。本發明的一種網頁上的節省網絡資源的動畫效果的實現方法，解決了配置不高的終端(電視盒子、手機)上運行動畫卡頓、閃退的問題。本發明的方法能夠在配置不高的電視盒子、手機上運行動畫效果，增加了交互性，給用戶更好地體驗。

技術領域

本發明涉及一種動畫效果的實現方法。特別是涉及一種網頁上的節省網絡資源的動畫效果的實現方法。

背景技術

隨著互聯網的蓬勃發展和html5技術的興起，html5技術為網頁提供了音頻、視頻、動畫等各種多媒體表現手段，網頁不再是單純的靜態的網頁，里面還包含有音頻、視頻、動畫等多媒體，給用戶帶來更好的體驗，但與此同時也帶來了一些問題，如資源越來越大、消耗的帶寬越來越多、客戶端瀏覽器上消耗的內存越來越多，特別是在硬件配置不高的電視盒子、手機在加載動畫的時候，可能出現卡頓、甚至閃退，這個時候就需要考慮消耗硬件資源低的動畫實現方案。

現有技術是采用javascript腳本語言編寫動畫。動畫由多個幀圖片組成，由javascript語言控制幀圖片的展示，從而實現動畫的播放。其存在如下不足：

1、需要很多的幀圖片，對網絡帶寬有很高的要求；

2、javascript在播放幀動畫的時候，會消耗較多的硬件資源，需要硬件配置較高。

發明內容

本發明所要解決的技術問題是，提供一種應用效果好的網頁上的節省網絡資源的動畫效果的實現方法。

本發明所采用的技術方案是：一種網頁上的節省網絡資源的動畫效果的實現方法，包括如下步驟：

1)把網頁動畫的畫面分為若干個靜止部分和若干個動態部分；

2)用若干個矩形框框住動態部分；

3)把用矩形框框住的部分分別做成gif格式的動態圖片；

4)利用網頁的布局css的position屬性，把gif格式的動態圖片精準的放到對應的矩形框內，形成若干個新的動態部分；

5)將若干個新的動態部分與步驟1)中的若干個靜止部分組合，完成網頁的動畫效果。

步驟1)所述的靜止的部分就是畫面固定不變的部分；動態的部分就是畫面動態改變的部分。

步驟3)在做成gif格式的動態圖片過程中，要把框里的所有內容都做成gif格式的動態圖片。

本發明的一種網頁上的節省網絡資源的動畫效果的實現方法，解決了配置不高的終端(電視盒子、手機)上運行動畫卡頓、閃退的問題。本發明的方法能夠在配置不高的電視盒子、手機上運行動畫效果，增加了交互性，給用戶更好地體驗。

具體實施方式

下面結合實施例對本發明的一種網頁上的節省網絡資源的動畫效果的實現方法做出詳細說明。

本發明的一種網頁上的節省網絡資源的動畫效果的實現方法，包括如下步驟：

1)把網頁動畫的畫面分為若干個靜止部分和若干個動態部分；所述的靜止的部分就是畫面固定不變的部分例如遠山；動態的部分就是畫面動態改變的部分，如人物的胡須隨風飄動。