本發(fā)明涉及動畫播放的，尤其是涉及一種頁面動畫的播放方法、裝置及電子設(shè)備。

背景技術(shù)：

1、隨著移動設(shè)備和網(wǎng)絡(luò)技術(shù)的發(fā)展，大量網(wǎng)站為了豐富網(wǎng)頁內(nèi)容，吸引用戶目光，在網(wǎng)頁中添加了很多動畫效果。基于瀏覽器內(nèi)核對網(wǎng)頁的解析原理，存在一種css(cascadingstyle?sheets，級聯(lián)樣式表)動畫。瀏覽器將網(wǎng)頁文檔，如html(hypertext?markuplanguage，超文本標(biāo)記語言)文檔，解析為dom(document?object?model，文檔對象模型)樹和css文件，通過css文件對各個dom節(jié)點的頁面元素進(jìn)行渲染。那么對于某個頁面元素，如果在不同的時間下，在不同位置、形狀、顏色等方面對其以css樣式規(guī)定，該頁面元素則會根據(jù)上述css樣式，隨著時間在不同位置、以不同形態(tài)進(jìn)行渲染展示，即在頁面中實現(xiàn)了動畫效果。

2、但是，css動畫在一般是預(yù)先設(shè)置在相應(yīng)的dom節(jié)點上的，一旦設(shè)置會立即播放，即便該節(jié)點并不在可視窗口之內(nèi)，也會進(jìn)行播放，往往使用戶難以看到完整的動畫，所以用戶體驗并不友好。

技術(shù)實現(xiàn)思路

1、有鑒于此，本發(fā)明的目的在于提供一種頁面動畫的播放方法、裝置及電子設(shè)備，以緩解上述技術(shù)問題。

2、第一方面，本發(fā)明實施例提供了一種頁面動畫的播放方法，所述方法包括：響應(yīng)頁面展示動作，遍歷目標(biāo)頁面，以基于預(yù)設(shè)的動畫屬性從所述目標(biāo)頁面的節(jié)點中選取至少一個目標(biāo)節(jié)點；其中，目標(biāo)節(jié)點為配置有動畫樣式的節(jié)點；生成包含所述目標(biāo)節(jié)點和所述目標(biāo)節(jié)點所配置的動畫樣式的屬性值的節(jié)點動畫屬性映射表；清除所述目標(biāo)節(jié)點所配置的所述動畫屬性，并在圖形用戶界面展示所述目標(biāo)頁面；監(jiān)聽所述目標(biāo)節(jié)點是否在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)；如果是，基于所述節(jié)點動畫屬性映射表在所述目標(biāo)節(jié)點播放所述動畫樣式對應(yīng)的動畫。

3、結(jié)合第一方面，本發(fā)明實施例提供了第一方面的第一種可能的實施方式，其中，上述每個所述目標(biāo)節(jié)點均對應(yīng)配置有第一監(jiān)聽事件；所述監(jiān)聽所述目標(biāo)節(jié)點是否在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)的步驟包括：響應(yīng)針對于所述目標(biāo)頁面的滾動操作，在所述目標(biāo)頁面的滾動過程中，通過所述第一監(jiān)聽事件監(jiān)聽所述目標(biāo)節(jié)點是否在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)。

4、結(jié)合第一方面的第一種可能的實施方式，本發(fā)明實施例提供了第一方面的第二種可能的實施方式，其中，上述通過所述第一監(jiān)聽事件監(jiān)聽所述目標(biāo)節(jié)點是否在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)的步驟，包括：獲取所述第一監(jiān)聽事件對應(yīng)的回調(diào)函數(shù)的返回值；如果所述返回值為預(yù)設(shè)的第一返回值，則確定所述目標(biāo)節(jié)點在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)；其中，所述第一返回值為所述目標(biāo)節(jié)點在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)時配置的函數(shù)返回值；如果所述返回值為預(yù)設(shè)的第二返回值，則確定所述目標(biāo)節(jié)點不在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)，其中，所述第二返回值為所述目標(biāo)節(jié)點不在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)時配置的函數(shù)返回值。

5、結(jié)合第一方面，本發(fā)明實施例提供了第一方面的第三種可能的實施方式，其中，上述節(jié)點動畫屬性映射表用于記錄所述目標(biāo)節(jié)點以及該目標(biāo)節(jié)點所配置的動畫樣式的屬性值的對應(yīng)關(guān)系；基于所述節(jié)點動畫屬性映射表在所述目標(biāo)節(jié)點播放所述動畫樣式對應(yīng)的動畫的步驟，包括：在所述節(jié)點動畫屬性映射表中查找所述目標(biāo)節(jié)點對應(yīng)的動畫樣式；將所述動畫樣式添加至所述目標(biāo)節(jié)點，并觸發(fā)所述目標(biāo)節(jié)點播放所述動畫樣式對應(yīng)的動畫。

6、結(jié)合第一方面，本發(fā)明實施例提供了第一方面的第四種可能的實施方式，其中，上述每個所述目標(biāo)頁面均對應(yīng)配置有第二監(jiān)聽事件；所述方法還包括：在所述目標(biāo)節(jié)點播放所述動畫樣式對應(yīng)的動畫過程中，通過所述第二監(jiān)聽事件監(jiān)聽針對于所述目標(biāo)頁面的切換操作；如果監(jiān)聽到第一切換操作，則為所述目標(biāo)節(jié)點配置第一標(biāo)簽，以暫停所述目標(biāo)節(jié)點的動畫的播放過程；其中，所述第一切換操作用于將所述圖形用戶界面對應(yīng)的可視范圍內(nèi)的所述目標(biāo)頁面切換至其他頁面；所述第一標(biāo)簽用于暫停所述目標(biāo)節(jié)點的動畫的播放過程。

7、結(jié)合第一方面的第四種可能的實施方式，本發(fā)明實施例提供了第一方面的第五種可能的實施方式，其中，上述方法還包括：如果監(jiān)聽到針對于所述圖形用戶界面的第二切換操作，則為所述目標(biāo)節(jié)點配置第二標(biāo)簽，以在所述目標(biāo)節(jié)點繼續(xù)播放所述動畫樣式對應(yīng)的動畫；其中，所述第二切換操作用于將所述圖形用戶界面對應(yīng)的可視范圍從其他頁面切換至所述目標(biāo)頁面；所述第二標(biāo)簽用于播放所述目標(biāo)節(jié)點的動畫。

8、結(jié)合第一方面，本發(fā)明實施例提供了第一方面的第六種可能的實施方式，其中，上述遍歷目標(biāo)頁面，以基于預(yù)設(shè)的動畫屬性從所述目標(biāo)頁面的節(jié)點中選取至少一個目標(biāo)節(jié)點的步驟，包括：遍歷所述目標(biāo)頁面，從所述目標(biāo)頁面的節(jié)點中選取動畫屬性為所述預(yù)設(shè)的動畫屬性的節(jié)點為目標(biāo)節(jié)點。

9、第二方面，本發(fā)明實施例還提供一種頁面動畫的播放裝置，所述裝置包括：遍歷模塊，用于響應(yīng)頁面展示動作，遍歷目標(biāo)頁面，以基于預(yù)設(shè)的動畫屬性從所述目標(biāo)頁面的節(jié)點中選取至少一個目標(biāo)節(jié)點；其中，目標(biāo)節(jié)點為配置有動畫樣式的節(jié)點；保存模塊，用于生成包含所述目標(biāo)節(jié)點和所述目標(biāo)節(jié)點所配置的動畫樣式的屬性值的節(jié)點動畫屬性映射表；清除模塊，用于清除所述目標(biāo)節(jié)點所配置的所述動畫屬性，并在圖形用戶界面展示所述目標(biāo)頁面；監(jiān)聽模塊，用于監(jiān)聽所述目標(biāo)節(jié)點是否在所述圖形用戶界面對應(yīng)的可視范圍內(nèi)；播放模塊，用于所述監(jiān)聽模塊的監(jiān)聽結(jié)果為是時，基于所述節(jié)點動畫屬性映射表在所述目標(biāo)節(jié)點播放所述動畫樣式對應(yīng)的動畫。

10、第三方面，本發(fā)明實施例還提供一種電子設(shè)備，包括存儲器、處理器及存儲在所述存儲器上并可在所述處理器上運行的計算機程序，所述處理器執(zhí)行所述計算機程序時實現(xiàn)上述第一方面所述的方法的步驟。

11、第四方面，本發(fā)明實施例還提供一種計算機可讀存儲介質(zhì)，所述計算機可讀存儲介質(zhì)上存儲有計算機程序，所述計算機程序被處理器運行時執(zhí)行上述第一方面所述的方法的步驟。

12、本發(fā)明實施例帶來了以下有益效果：

13、本發(fā)明實施例提供的一種頁面動畫的播放方法、裝置及電子設(shè)備，能夠響應(yīng)頁面展示動作，遍歷目標(biāo)頁面，以基于預(yù)設(shè)的動畫屬性從目標(biāo)頁面的節(jié)點中選取至少一個配置有動畫樣式的目標(biāo)節(jié)點；生成包含目標(biāo)節(jié)點和目標(biāo)節(jié)點所配置的動畫樣式的屬性值的節(jié)點動畫屬性映射表；并清除目標(biāo)節(jié)點所配置的動畫屬性，然后在圖形用戶界面展示目標(biāo)頁面；監(jiān)聽目標(biāo)節(jié)點是否在圖形用戶界面對應(yīng)的可視范圍內(nèi)；如果是，則基于節(jié)點動畫屬性映射表在目標(biāo)節(jié)點播放動畫樣式對應(yīng)的動畫，通過監(jiān)聽每個目標(biāo)節(jié)點是否在可視范圍內(nèi)，可以在目標(biāo)節(jié)點進(jìn)入到可視范圍內(nèi)時，去控制在目標(biāo)節(jié)點播放動畫樣式對應(yīng)的動畫，可以避免動畫提前播放而導(dǎo)致的用戶無法看到完整動畫的情形，有效提升了用戶體驗。

14、本發(fā)明的其他特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點在說明書、權(quán)利要求書以及附圖中所特別指出的結(jié)構(gòu)來實現(xiàn)和獲得。

15、為使本發(fā)明的上述目的、特征和優(yōu)點能更明顯易懂，下文特舉較佳實施例，并配合所附附圖，作詳細(xì)說明如下。