本申請涉及網(wǎng)頁動(dòng)畫技術(shù)領(lǐng)域，更具體地說，涉及一種瀏覽器、動(dòng)畫編輯播放系統(tǒng)及方法。

背景技術(shù)：

網(wǎng)頁動(dòng)畫是一種實(shí)現(xiàn)動(dòng)態(tài)界面交互和設(shè)計(jì)效果的技術(shù)，現(xiàn)有技術(shù)中完善的動(dòng)畫編輯播放系統(tǒng)為基于Flash技術(shù)的動(dòng)畫編輯播放系統(tǒng)。但是基于Flash技術(shù)的動(dòng)畫編輯播放系統(tǒng)需要以插件的形式嵌入到瀏覽器中才能夠使用，增加了瀏覽器的運(yùn)行復(fù)雜程度，并且隨著網(wǎng)頁動(dòng)畫技術(shù)的不斷發(fā)展，基于Flash技術(shù)的動(dòng)畫編輯播放系統(tǒng)暴露除了諸如安全性差、占用內(nèi)存多以及耗電量大的缺點(diǎn)，使得越來越多的硬件及軟件廠家表示將逐步淘汰基于Flash技術(shù)的動(dòng)畫編輯播放系統(tǒng)。

因此，尋找一種替代Flash技術(shù)，且較為完善的動(dòng)畫編輯播放系統(tǒng)成為研究人員努力的方向。

技術(shù)實(shí)現(xiàn)要素：

為解決上述技術(shù)問題，本發(fā)明提供了一種瀏覽器、動(dòng)畫編輯播放系統(tǒng)及方法，實(shí)現(xiàn)了提供一種基于CSS技術(shù)，且較為完善的動(dòng)畫編輯播放系統(tǒng)的目的。

為實(shí)現(xiàn)上述技術(shù)目的，本發(fā)明實(shí)施例提供了如下技術(shù)方案：

一種動(dòng)畫編輯播放系統(tǒng)，包括：

編輯模塊，用于獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)；

生成模塊，用于根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)；

播放模塊，用于根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

可選的，所述動(dòng)畫參數(shù)包括場景參數(shù)、圖層參數(shù)、時(shí)間軸參數(shù)、關(guān)鍵幀參數(shù)和元素參數(shù)中的至少一項(xiàng)。

可選的，所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)包括：內(nèi)容源碼數(shù)據(jù)、樣式風(fēng)格源碼數(shù)據(jù)和交互源碼數(shù)據(jù)。

可選的，所述內(nèi)容源碼數(shù)據(jù)為HTML源碼數(shù)據(jù)；

所述樣式風(fēng)格源碼數(shù)據(jù)為CSS源碼數(shù)據(jù)；

所述交互源碼數(shù)據(jù)為Javascript源碼數(shù)據(jù)。

一種動(dòng)畫編輯播放方法，包括：

獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)；

根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)；

根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

可選的，所述獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)包括：

獲取目標(biāo)動(dòng)畫的場景參數(shù)、圖層參數(shù)、時(shí)間軸參數(shù)、關(guān)鍵幀參數(shù)和元素參數(shù)中的至少一項(xiàng)。

可選的，所述根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)包括：

根據(jù)所述動(dòng)畫參數(shù)，生成內(nèi)容源碼數(shù)據(jù)、樣式風(fēng)格源碼數(shù)據(jù)和交互源碼數(shù)據(jù)。

可選的，所述內(nèi)容源碼數(shù)據(jù)為HTML源碼數(shù)據(jù)；

所述樣式風(fēng)格源碼數(shù)據(jù)為CSS源碼數(shù)據(jù)；

所述交互源碼數(shù)據(jù)為Javascript源碼數(shù)據(jù)。

一種瀏覽器，包括如上述任一項(xiàng)所述的動(dòng)畫編輯播放系統(tǒng)。

從上述技術(shù)方案可以看出，本發(fā)明實(shí)施例提供了一種瀏覽器、動(dòng)畫編輯播放系統(tǒng)及方法，其中，所述動(dòng)畫編輯播放系統(tǒng)基于CSS技術(shù)提供了一種動(dòng)畫從編輯到播放的較為完善的系統(tǒng)，以實(shí)現(xiàn)替代基于Flash的動(dòng)畫編輯播放系統(tǒng)的目的。并且整個(gè)動(dòng)畫的編輯及播放過程不需要用戶直接輸入復(fù)雜的CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，只需要將目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)輸入到所述編輯模塊即可通過所述生成模塊轉(zhuǎn)換成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，從而使得所述播放模塊可以根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫，降低了所述動(dòng)畫編輯播放系統(tǒng)的使用難度，增加了所述動(dòng)畫編輯播放系統(tǒng)的適用性。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。

圖1為本申請的一個(gè)實(shí)施例提供的一種動(dòng)畫編輯播放系統(tǒng)的結(jié)構(gòu)示意圖；

圖2為本申請的一個(gè)實(shí)施例提供的一種動(dòng)畫編輯播放方法的流程示意圖；

圖3為本申請的另一個(gè)實(shí)施例提供的一種動(dòng)畫編輯播放方法的流程示意圖；

圖4為本申請的又一個(gè)實(shí)施例提供的一種動(dòng)畫編輯播放方法的流程示意圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

本申請實(shí)施例提供了一種動(dòng)畫編輯播放系統(tǒng)，如圖1所示，包括：

編輯模塊100，用于獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)；

生成模塊200，用于根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)；

播放模塊300，用于根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

需要說明的是，在本實(shí)施例中，所述編輯模塊100為用戶提供了一個(gè)交互界面，用于供用戶進(jìn)行目標(biāo)動(dòng)畫的編輯操作，并且用戶對目標(biāo)動(dòng)畫進(jìn)行編輯操作時(shí)只需要輸入目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)即可，而不用直接編輯較為復(fù)雜的層疊樣式表(Cascading Style Sheets，CSS)標(biāo)準(zhǔn)的源碼數(shù)據(jù)，降低了用戶利用所述動(dòng)畫編輯播放系統(tǒng)進(jìn)行動(dòng)畫編輯的難度，增加了所述動(dòng)畫編輯播放系統(tǒng)的適用性。當(dāng)用戶通過所述編輯模塊100輸入所述目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)后，所述生成模塊200根據(jù)各個(gè)動(dòng)畫參數(shù)與CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)的對應(yīng)關(guān)系，生成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，以供所述播放模塊300根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

CSS是一種控制網(wǎng)頁元素樣式風(fēng)格的語言，最初只用于控制頁面元素的靜態(tài)外觀屬性，例如字體、邊框、背景色和邊距等，但隨著CSS標(biāo)準(zhǔn)的改進(jìn)和技術(shù)的進(jìn)步，CSS標(biāo)準(zhǔn)開始加入動(dòng)畫技術(shù)，可以通過設(shè)置關(guān)鍵幀和轉(zhuǎn)場過渡等方式實(shí)現(xiàn)頁面元素的動(dòng)態(tài)效果。并且CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)被現(xiàn)今幾乎所有的瀏覽器所支持，瀏覽器不需要額外的插件即可根據(jù)CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放目標(biāo)動(dòng)畫，降低了瀏覽器的負(fù)擔(dān)和占用的內(nèi)存資源，降低了所述動(dòng)畫編輯播放系統(tǒng)的耗電量，使其能夠更加良好的應(yīng)用于移動(dòng)設(shè)備中。

本申請實(shí)施例提供的動(dòng)畫編輯播放系統(tǒng)基于CSS技術(shù)提供了一種動(dòng)畫從編輯到播放的較為完善的系統(tǒng)，以實(shí)現(xiàn)替代基于Flash的動(dòng)畫編輯播放系統(tǒng)的目的。并且整個(gè)動(dòng)畫的編輯及播放過程不需要用戶直接輸入復(fù)雜的CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，只需要將目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)輸入到所述編輯模塊100即可通過所述生成模塊200轉(zhuǎn)換成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，從而使得所述播放模塊300可以根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫，降低了所述動(dòng)畫編輯播放系統(tǒng)的使用難度，增加了所述動(dòng)畫編輯播放系統(tǒng)的適用性。

在上述實(shí)施例的基礎(chǔ)上，在本申請的一個(gè)實(shí)施例中，所述動(dòng)畫參數(shù)包括場景參數(shù)、圖層參數(shù)、時(shí)間軸參數(shù)、關(guān)鍵幀參數(shù)和元素參數(shù)中的至少一項(xiàng)。

需要說明的是，所述動(dòng)畫參數(shù)是指能夠定義所述目標(biāo)動(dòng)畫的各種屬性的參數(shù)，在本申請的其他實(shí)施例中，所述動(dòng)畫參數(shù)還包括轉(zhuǎn)場過渡參數(shù)，本申請對所述動(dòng)畫參數(shù)所包含的具體內(nèi)容并不做限定，具體視實(shí)際情況而定。

在上述實(shí)施例的基礎(chǔ)上，在本申請的另一個(gè)實(shí)施例中，所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)包括：內(nèi)容源碼數(shù)據(jù)、樣式風(fēng)格源碼數(shù)據(jù)和交互源碼數(shù)據(jù)。

其中，所述內(nèi)容源碼數(shù)據(jù)用于表示所述目標(biāo)動(dòng)畫的內(nèi)容，所述樣式風(fēng)格源碼數(shù)據(jù)用于表示所述目標(biāo)動(dòng)畫的樣式和風(fēng)格種類，所述交互源碼數(shù)據(jù)包含所述目標(biāo)動(dòng)畫邏輯控制數(shù)據(jù)，例如從A點(diǎn)到B點(diǎn)畫一條貝塞爾曲線，這個(gè)過程就由所述交互源碼數(shù)據(jù)控制。

具體地，在本申請的一個(gè)實(shí)施例中，所述內(nèi)容源碼數(shù)據(jù)為HTML(HyperText Markup Language，超文本標(biāo)記語言)源碼數(shù)據(jù)；

所述樣式風(fēng)格源碼數(shù)據(jù)為CSS源碼數(shù)據(jù)；

所述交互源碼數(shù)據(jù)為Javascript源碼數(shù)據(jù)。

相應(yīng)的，本申請實(shí)施例還提供了一種動(dòng)畫編輯播放方法，如圖2所示，包括：

S101：獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)；

S102：根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)；

S103：根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

需要說明的是，在本實(shí)施例中，在步驟S101中為用戶提供了一個(gè)交互界面，用于供用戶進(jìn)行目標(biāo)動(dòng)畫的編輯操作，并且用戶對目標(biāo)動(dòng)畫進(jìn)行編輯操作時(shí)只需要輸入目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)即可，而不用直接編輯較為復(fù)雜的層疊樣式表(Cascading Style Sheets，CSS)標(biāo)準(zhǔn)的源碼數(shù)據(jù)，降低了用戶利用所述動(dòng)畫編輯播放方法進(jìn)行動(dòng)畫編輯的難度，增加了所述動(dòng)畫編輯播放方法的適用性。當(dāng)用戶輸入所述目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)后，在步驟S102中根據(jù)各個(gè)動(dòng)畫參數(shù)與CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)的對應(yīng)關(guān)系，生成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，以根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫。

CSS是一種控制網(wǎng)頁元素樣式風(fēng)格的語言，最初只用于控制頁面元素的靜態(tài)外觀屬性，例如字體、邊框、背景色和邊距等，但隨著CSS標(biāo)準(zhǔn)的改進(jìn)和技術(shù)的進(jìn)步，CSS標(biāo)準(zhǔn)開始加入動(dòng)畫技術(shù)，可以通過設(shè)置關(guān)鍵幀和轉(zhuǎn)場過渡等方式實(shí)現(xiàn)頁面元素的動(dòng)態(tài)效果。并且CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)被現(xiàn)今幾乎所有的瀏覽器所支持，瀏覽器不需要額外的插件即可根據(jù)CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放目標(biāo)動(dòng)畫，降低了瀏覽器的負(fù)擔(dān)和占用的內(nèi)存資源，降低了所述動(dòng)畫編輯播放方法的耗電量，使其能夠更加良好的應(yīng)用于移動(dòng)設(shè)備中。

本申請實(shí)施例提供的動(dòng)畫編輯播放方法基于CSS技術(shù)提供了一種動(dòng)畫從編輯到播放的較為完善的流程，以實(shí)現(xiàn)替代基于Flash的動(dòng)畫編輯播放方法的目的。并且整個(gè)動(dòng)畫的編輯及播放過程不需要用戶直接輸入復(fù)雜的CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，只需要輸入目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)即可轉(zhuǎn)換成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，從而可以根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫，降低了所述動(dòng)畫編輯播放方法的使用難度，增加了所述動(dòng)畫編輯播放方法的適用性。

在上述實(shí)施例的基礎(chǔ)上，在本申請的一個(gè)實(shí)施例中，如圖3所示，所述獲取目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)包括：

S1011：獲取目標(biāo)動(dòng)畫的場景參數(shù)、圖層參數(shù)、時(shí)間軸參數(shù)、關(guān)鍵幀參數(shù)和元素參數(shù)中的至少一項(xiàng)。

需要說明的是，所述動(dòng)畫參數(shù)是指能夠定義所述目標(biāo)動(dòng)畫的各種屬性的參數(shù)，在本申請的其他實(shí)施例中，所述動(dòng)畫參數(shù)還包括轉(zhuǎn)場過渡參數(shù)，本申請對所述動(dòng)畫參數(shù)所包含的具體內(nèi)容并不做限定，具體視實(shí)際情況而定。

在上述實(shí)施例的基礎(chǔ)上，在本申請的另一個(gè)實(shí)施例中，如圖4所示，所述根據(jù)所述動(dòng)畫參數(shù)，生成層疊樣式表CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)包括：

S1021：根據(jù)所述動(dòng)畫參數(shù)，生成內(nèi)容源碼數(shù)據(jù)、樣式風(fēng)格源碼數(shù)據(jù)和交互源碼數(shù)據(jù)。

其中，所述內(nèi)容源碼數(shù)據(jù)用于表示所述目標(biāo)動(dòng)畫的內(nèi)容，所述樣式風(fēng)格源碼數(shù)據(jù)用于表示所述目標(biāo)動(dòng)畫的樣式和風(fēng)格種類，所述交互源碼數(shù)據(jù)包含所述目標(biāo)動(dòng)畫邏輯控制數(shù)據(jù)，例如從A點(diǎn)到B點(diǎn)畫一條貝塞爾曲線，這個(gè)過程就由所述交互源碼數(shù)據(jù)控制。

具體地，在本申請的一個(gè)實(shí)施例中，所述內(nèi)容源碼數(shù)據(jù)為HTML(HyperText Markup Language，超文本標(biāo)記語言)源碼數(shù)據(jù)；

所述樣式風(fēng)格源碼數(shù)據(jù)為CSS源碼數(shù)據(jù)；

所述交互源碼數(shù)據(jù)為Javascript源碼數(shù)據(jù)。

相應(yīng)的，本申請實(shí)施例還提供了一種瀏覽器，包括如上述任一實(shí)施例所述的動(dòng)畫編輯播放系統(tǒng)。

綜上所述，本申請實(shí)施例提供了一種瀏覽器、動(dòng)畫編輯播放系統(tǒng)及方法，其中，所述動(dòng)畫編輯播放系統(tǒng)基于CSS技術(shù)提供了一種動(dòng)畫從編輯到播放的較為完善的系統(tǒng)，以實(shí)現(xiàn)替代基于Flash的動(dòng)畫編輯播放系統(tǒng)的目的。并且整個(gè)動(dòng)畫的編輯及播放過程不需要用戶直接輸入復(fù)雜的CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，只需要將目標(biāo)動(dòng)畫的動(dòng)畫參數(shù)輸入到所述編輯模塊100即可通過所述生成模塊200轉(zhuǎn)換成CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)，從而使得所述播放模塊300可以根據(jù)所述CSS標(biāo)準(zhǔn)的源碼數(shù)據(jù)播放所述目標(biāo)動(dòng)畫，降低了所述動(dòng)畫編輯播放系統(tǒng)的使用難度，增加了所述動(dòng)畫編輯播放系統(tǒng)的適用性。

本說明書中各個(gè)實(shí)施例采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說明的都是與其他實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同相似部分互相參見即可。

對所公開的實(shí)施例的上述說明，使本領(lǐng)域?qū)I(yè)技術(shù)人員能夠?qū)崿F(xiàn)或使用本發(fā)明。對這些實(shí)施例的多種修改對本領(lǐng)域的專業(yè)技術(shù)人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發(fā)明的精神或范圍的情況下，在其它實(shí)施例中實(shí)現(xiàn)。因此，本發(fā)明將不會被限制于本文所示的這些實(shí)施例，而是要符合與本文所公開的原理和新穎特點(diǎn)相一致的最寬的范圍。