[發(fā)明專利]網(wǎng)頁動(dòng)畫效果的實(shí)現(xiàn)方法、系統(tǒng)、設(shè)備及存儲(chǔ)介質(zhì)

有效

• 申請(qǐng)?zhí)枺?/td>: 201711309995.X
• 申請(qǐng)日: 2017-12-11
• 公開（公告）號(hào): CN107967344B
• 公開（公告）日: 2020-07-14
• 發(fā)明（設(shè)計(jì)）人: 黃君
• 申請(qǐng)（專利權(quán)）人: 上海攜程商務(wù)有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957;G06F9/451;G06T13/80
• 代理公司: 上海隆天律師事務(wù)所 31282
• 代理人: 臧云霄;夏彬

本發(fā)明提供了一種網(wǎng)頁動(dòng)畫效果的實(shí)現(xiàn)方法、系統(tǒng)、設(shè)備及存儲(chǔ)介質(zhì)，該方法包括將待處理的多個(gè)靜態(tài)圖片生成動(dòng)態(tài)圖片；創(chuàng)建包括網(wǎng)頁信息的超文本標(biāo)記語言文件，并在所述超文本標(biāo)記語言文件中插入所述動(dòng)態(tài)圖片；利用層疊樣式表定義所述動(dòng)態(tài)圖片的初始位置；利用所述層疊樣式表定義基于所述動(dòng)態(tài)圖片的動(dòng)畫的顯示樣式。本發(fā)明解決了配置不高的終端(例如電視盒子、手機(jī))上運(yùn)行動(dòng)畫卡頓、閃退的問題；能夠在配置不高的電視盒子、手機(jī)上運(yùn)行動(dòng)畫效果，增加了交互性，給用戶更好的體驗(yàn)。

技術(shù)領(lǐng)域

本發(fā)明涉及網(wǎng)頁處理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁動(dòng)畫效果的實(shí)現(xiàn)方法、系統(tǒng)、設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)

隨著互聯(lián)網(wǎng)的蓬勃發(fā)展和Html5(超文本標(biāo)記語言(HTML)的第五次重大修改)技術(shù)的興起，Html5技術(shù)為網(wǎng)頁提供了音頻、視頻、動(dòng)畫等各種多媒體表現(xiàn)手段，網(wǎng)頁不再是單純的靜態(tài)的網(wǎng)頁，里面還包含有音頻、視頻、動(dòng)畫等多媒體，給用戶帶來更好的體驗(yàn)，但與此同時(shí)也帶來了一些問題，如資源越來越大、消耗的帶寬越來越多、客戶端瀏覽器上消耗的內(nèi)存越來越多，特別是在硬件配置不高的電視盒子、手機(jī)在加載動(dòng)畫的時(shí)候，可能出現(xiàn)卡頓、甚至閃退，這個(gè)時(shí)候就需要考慮消耗硬件資源低的動(dòng)畫實(shí)現(xiàn)方案。

現(xiàn)有技術(shù)有三種

1、Canvas：Canvas是使用JavaScript程序繪圖(動(dòng)態(tài)生成)

1)在部分Android機(jī)器上則出現(xiàn)了很奇葩的閃爍；

2)依賴分辨率；

3)不支持事件處理器。

2、SVG：SVG是使用XML文檔描述來繪圖。

1)DOM比正常的圖形慢，而且如果其結(jié)點(diǎn)多而雜，就更慢；

2)不能與HTML內(nèi)容集成；

3)整個(gè)SVG作為一個(gè)動(dòng)畫；

4)瀏覽器兼容性問題，IE8-以及Android2.3默認(rèn)瀏覽器是不支持SVG。

3、Javascript：Javascript腳本語言編寫動(dòng)畫。動(dòng)畫由多個(gè)幀圖片組成，由Javascript語言控制幀圖片的展示

1)JavaScript在瀏覽器的主線程中運(yùn)行，而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對(duì)其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況；

2)代碼的復(fù)雜度高；

3)Javascript在播放幀動(dòng)畫的時(shí)候，會(huì)消耗較多的硬件資源，需要硬件配置較高；

4)需要很多的幀圖片，對(duì)網(wǎng)絡(luò)帶寬有很高的要求。

發(fā)明內(nèi)容

針對(duì)現(xiàn)有技術(shù)中的問題，本發(fā)明的目的在于提供一種網(wǎng)頁動(dòng)畫效果的實(shí)現(xiàn)方法、系統(tǒng)、設(shè)備及存儲(chǔ)介質(zhì)，解決配置不高的終端(電視盒子、手機(jī))上運(yùn)行動(dòng)畫卡頓、閃退的問題。

本發(fā)明實(shí)施例提供一種網(wǎng)頁動(dòng)畫效果的實(shí)現(xiàn)方法，包括如下步驟：

將待處理的多個(gè)靜態(tài)圖片生成動(dòng)態(tài)圖片；

創(chuàng)建包括網(wǎng)頁信息的超文本標(biāo)記語言文件，并在所述超文本標(biāo)記語言文件中插入所述動(dòng)態(tài)圖片；

于所述超文本標(biāo)記語言文件中，利用層疊樣式表定義所述動(dòng)態(tài)圖片的初始位置；

于所述超文本標(biāo)記語言文件中，利用所述層疊樣式表定義基于所述動(dòng)態(tài)圖片的動(dòng)畫的顯示樣式。

可選地，在所述超文本標(biāo)記語言文件中以div標(biāo)簽插入所述動(dòng)態(tài)圖片。

可選地，利用層疊樣式表的position屬性定義所述動(dòng)態(tài)圖片的初始位置。