網頁動畫渲染方法及裝置的制造方法
【技術領域】
[0001]本發明涉及WEB平臺技術領域，特別是涉及一種網頁動畫渲染方法、網頁動畫渲染裝置。
【背景技術】
[0002]Web (互聯網)網頁是萬維網上的一個按照HTML (HyperText Mark-up Language，超文本標記語言)格式組織起來的文件，在通過萬維網進行信息查詢時，以信息頁面的形式出現。Web網頁可包括圖形、文字、聲音和視像等信息，這些信息統稱為網頁元素。
[0003]Web桌面應用化指的是web網頁在操作和體驗上與普通電腦桌面應用程序一致。在html5 (超文本標記語言第5次修改)、css3 (層疊樣式表)等技術出現后，人性化、靈動化的網頁交互體驗將會慢慢滲入主流。但是目前主流的網站，例如微博、云盤或搜索引擎等，網頁元素的加載渲染都不會過度設計網頁元素的動畫效果，當必要時會以單個元素加載動畫效果，無法很好的與桌面應用動畫渲染媲美，從而無法很好的實現產品的web桌面應用化。另外，目前技術方案在網頁上進行動畫效果渲染時，采取相同的動畫效果渲染，沒有考慮網頁實際情況，這會導致在普通配置的電腦上因為性能瓶頸，而無法完美的渲染設計師的設計意圖，網頁交互體驗較差。
【發明內容】
[0004]基于此，有必要針對上述問題，提供一種網頁動畫渲染方法及裝置，能夠在保證用戶最基本的功能需求上提高用戶的網頁使用體驗。
[0005]—種網頁動畫渲染方法，包括步驟:
[0006]檢測網頁待加載元素數量與預設數量閾值的大小；
[0007]若所述元素數量大于預設數量閾值且所述元素的容器包含動畫屬性，將所述動畫屬性刪除，得到新的容器；若所述元素數量大于預設數量閾值且所述元素的容器不包含動畫屬性，將所述容器作為新的容器；若所述元素數量小于等于預設數量閾值，將待渲染的動畫屬性添加到所述元素的容器中，得到新的容器；
[0008]根據預設的數據加載方式，將所述元素加載到網頁，并在所述新的容器包含動畫屬性時進行相應的動畫渲染。
[0009]—種網頁動畫渲染裝置，包括依次相連的元素數量檢測模塊、動畫屬性處理模塊和數據加載模塊；
[0010]元素數量檢測模塊，用于檢測網頁待加載元素數量與預設數量閾值的大小；
[0011]動畫屬性處理模塊，用于在所述元素數量大于預設數量閾值且所述元素的容器包含動畫屬性時，將所述動畫屬性刪除，得到新的容器；在所述元素數量大于預設數量閾值且所述元素的容器不包含動畫屬性時，將所述容器作為新的容器；在所述元素數量小于等于預設數量閾值時，將待渲染的動畫屬性添加到所述元素的容器中，得到新的容器；
[0012]數據加載模塊，用于根據預設的數據加載方式，將所述元素加載到網頁，并在所述新的容器包含動畫屬性時進行相應的動畫渲染。
[0013]本發明網頁動畫渲染方法及裝置，根據網頁待加載元素數量與預設數量閾值的大小，當統一加載或編輯時，自動采取合適的動畫清染，即在待加載元素數量大于預設數量閾值時不進行動畫清染，在待加載元素數量不大于預設數量閾值時，進行相應的動畫清染。本發明實現了網頁動畫渲染的自適應，在保證用戶在web應用上完成所有操作的前提下，自動適應并合理的加載相應的動畫效果，提高了用戶的網頁使用體驗。
【附圖說明】
[0014]圖1為本發明方法實施例的流程示意圖；
[0015]圖2為本發明裝置實施例的結構示意圖。
【具體實施方式】
[0016]下面結合附圖對本發明網頁動畫渲染方法的【具體實施方式】做詳細描述。
[0017]如圖1所示，一種網頁動畫渲染方法，包括步驟:
[0018]S110、檢測網頁待加載元素數量與預設數量閾值的大小，若所述元素數量大于預設數量閾值且所述元素的容器包含動畫屬性，進入步驟S120，若所述元素數量大于預設數量閾值且所述元素的容器不包含動畫屬性，進入步驟S130，若所述元素數量小于等于預設數量閾值，進入步驟S140 ;
[0019]S120、將所述動畫屬性刪除，得到新的容器，進入步驟S150 ;
[0020]S130、將所述容器作為新的容器，進入步驟S150 ；
[0021]S140、將待渲染的動畫屬性添加到所述元素的容器中，得到新的容器，進入步驟S150 ；
[0022]S150、根據預設的數據加載方式，將所述元素加載到網頁，并在所述新的容器包含動畫屬性時進行相應的動畫渲染。
[0023]網頁待加載元素數量指的是網頁模仿桌面應用動畫效果時，網頁上需要執行該動畫效果的元素數量，待加載元素存儲在容器內。衡量要加載的動畫效果所能支持的元素的數量，當待加載元素數量大于預設數量閾值時，關閉動畫效果，即不進行動畫渲染，當待加載元素數量不大于預設數量閾值時，加載相應的動畫效果。
[0024]容器上可能標注有歷史的動畫屬性，在待加載元素數量大于預設數量閾值且容器包含動畫屬性時，需要先將容器上的動畫屬性進行刪除，然后再進行后續的步驟。在待加載元素數量大于預設數量閾值且容器不包含動畫屬性時，直接進行后續的步驟。在待加載元素數量不大于預設數量閾值時，需要將待渲染的動畫屬性標注在容器上，然后進行后續的步驟。動畫屬性也可以標注在容器內的各元素上，但是在后續加載時網頁會出現較多內容，所以一般實施過程中不采取這種方式。
[0025]在進行網頁元素加載和動畫渲染之前，用戶可以根據實際需要選擇數據加載方式。異步數據加載和直出數據加載是當下主流的網頁加載數據的方式，本發明針對這兩種方式給出相應的加載方案。異步數據加載指的是打開網頁時，在加載了例如頁面框架等頁面基礎內容后，通過網頁腳本javascript (直譯式腳本語言)向服務器再次發起數據請求，再而將請求返回的數據以這種“異步”的形式加載到網頁內。直出數據加載指的是頁面打開瞬間，網頁的所有數據已經加載完畢，一次性渲染到用戶的瀏覽器上。需要說明的是，本發明并不僅僅限制于這兩種加載方式的實施，只要通過設置判斷條件確定是否加載動畫以及后續實施例中進一步設置條件確定以何種維度加載動畫效果的方式均在本發明的保護范圍之內。
[0026]確定好是否進行動畫渲染后，根據采取的數據加載方式的不同采取不用的處理措施。若采用異步數據加載，將所述元素通過模板工具，例如網頁腳本javascript的handlerbars(結合數據+模板可生成相應的html)等，直接加載到網頁，并根據最終容器所標注的動畫屬性，例如搖擺、翻轉、淡入淡出、放大縮小等動畫效果，通過css3或html5等技術進行動畫渲染，若最終容器不包含動畫屬性，則不進行動畫渲染。當采用直出數據加載時，需要先修改所述新的容器的動畫屬性，例如通過在所述新的容器上添加class樣式屬性等修改所述新的容器的動畫屬性，然后根據最終容器所標注的動畫屬性通過css3或html5等技術進行動畫渲染，若最終容器不包含動畫屬性，則不進行動畫渲染。
[0027]為了進一步提高用戶的使用體驗，在確定進行動畫渲染時，根據待加載元素數量，以某種維度加載相應的動畫效果，例如，在一個實施例中，在所述新的容器包含動畫屬性時進行相應的動畫渲染的步驟包括:
[0028](I)完全加載:若所述元素數量小于第一預設閾值，例如所述第一預設閾值為100，根據所述新的容器或所述元素容器包含的動畫屬性直接進行動畫渲染，該加載方式保持了完整的動畫效果。
[0029](2)不同步加載:若所述元素數量大于等于第一預設閾值并小于等于第二預設閾值，設置每個元素動畫渲染的時間，在所述時間到達時，根據所述動畫屬性對相應的元素進行動畫渲染，其中所述時間中至少有一個時間與其它時間不相同，第一預設閾值小于第二預設閾值，第二預設閾值小于預設數量閾值。
[0030]第一預設閾值和第二預設閾值可以根據實際需求設置，例如第一預設閾值設置為100，第二預設閾值設置為1000。每個元素動畫清染的時間可以通過網頁腳本javascript的定時器設置，設置每個元素動畫渲染的時間主要是為了將每個元素動畫執行時間差錯開，以緩解一瞬間執行所有動畫給瀏覽器帶來的壓力。作為一個較好實施例，可以將每個元素的動畫渲染時間以I毫秒或其它時間差錯開，即每個元素動畫渲染時間均不相同，間隔I毫秒或其它時間。該加載方式僅是將渲染時間差錯開，也保持了完整的動畫效果。
[0031](3)不同步加載+弱化動畫效果:若所述元素數量大于第二預設閾值，先按照步驟
(2)的方式設置每個元素動畫渲染的所述時間，以緩解瀏覽器壓力，接著降低所述動畫屬性的執行頻率，例如將swing (搖擺)一秒鐘搖擺5次降低為2次等，弱化動畫效果，得到新的動畫屬性，在所述時間到達時，根據所述新的動畫屬性對相應的元素進行動畫渲染。該加載方式不僅將渲染時間差錯開，還弱化了動畫效果，從而在不影響性能的情況下提高了用戶的網頁交互體驗。
[0032]本發明方法先根據待加載元素數量確定是否進行動畫渲染，在不需要進行動畫渲染時，關閉動畫效果，以保證用戶最基本的功能需求。在進行動畫渲染時再根據待加載元素數量確定以何種維度加載相應的動畫效果，從而在保證用戶在web應用上完成所有操作的前提下，自動適應并合理的加載相應的動畫效果，提高用戶的網頁交互體驗。
[0033]為了更好的理解本發明的【具體實施方式】，下面結合一個具體應用實例對本發明的實施過程詳細描述。
[0034]假設使用web網頁模仿1s(蘋果公司的移動操作系統)編輯、刪除桌面應用時的swing效果；預設數量閾值設置為3000，第一預設閾值設置為100，第二預設閾值設置為1000 ;采用異步數據加載方式。當200個元素需要進行編輯或操作時，根據本發明方案可知網頁可以進行動畫渲染，此時將swing —秒鐘搖擺5次的動畫屬性添加到元素容器中。將200個元素加載到網頁，由于此時待加載元素數量在第一預設閾值和第二預設閾值之間，網頁交互操作會出現卡頓，所以通過網頁腳本的定時器將200個元素的動畫渲染時