動畫展示方法和裝置的制造方法
【技術(shù)領域】
[0001]本發(fā)明涉及CSS動畫技術(shù)領域，具體涉及一種動畫展示方法和裝置。
【背景技術(shù)】
[0002]隨著網(wǎng)頁技術(shù)的發(fā)展，很多web網(wǎng)頁開發(fā)者為了豐富網(wǎng)頁中展示的內(nèi)容，將很多動畫在網(wǎng)頁中進行展示。而基于瀏覽器內(nèi)核對網(wǎng)頁的解析原理，存在一種CSS(CascadingStyle Sheets，級聯(lián)樣式表)動畫。瀏覽器內(nèi)核可將網(wǎng)頁文檔，如html (Hypertext MarkupLanguage，超文本標記語言)文檔，解析為DOM(Document Object Model，文檔對象模型)樹和CSS文件，通過CSS文件對各個DOM節(jié)點的頁面元素進行渲染。那么對于某個頁面元素，如果在不同的時間下，在不同位置、形狀等方面對其以CSS樣式規(guī)定，那么該頁面元素則會根據(jù)上述CSS樣式，隨著時間在不同位置、以不同形狀進行渲染展示，即在tab頁面中實現(xiàn)了動畫效果。
[0003]但是，在先技術(shù)中，對于CSS動畫，web網(wǎng)頁開發(fā)者均需要在編輯器中預先對html文檔的CSS文件進行編輯，如果想要知道CSS動畫的效果，則需要切換到瀏覽器中，通過瀏覽器獲取編輯后的html文檔，然后刷新以預覽CSS動畫效果。
[0004]在上述過程中，由于web開發(fā)者不知道在編輯器中編輯完的CSS動畫的效果具體如何，需要不斷在瀏覽器和編輯器中來回切換，以編輯其最需要的CSS代碼，其CSS動畫的編寫效率低。

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

[0005]鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的動畫展示裝置和相應的動畫展示方法。
[0006]依據(jù)本發(fā)明的一個方面，本發(fā)明公開了一種動畫展示的方法，包括:
[0007]加載待添加CSS動畫的網(wǎng)頁文檔，獲得tab頁面；所述網(wǎng)頁文檔中指定的頁面元素包括動畫添加類標識；
[0008]在tab頁面中，對應動畫添加類標識的頁面元素之上，根據(jù)用戶的觸發(fā)操作啟動動畫選擇窗口；
[0009]當在所述動畫選擇窗口接收到用戶對一個CSS動畫的指定操作后，在一個彈出窗口中展示所述CSS動畫；
[0010]當用戶確定選擇所述CSS動畫之后，在所述tab頁面中對應動畫添加類標識的頁面元素之中，添加所述CSS動畫并渲染展示；
[0011]在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加所述CSS動畫的CSS代碼。
[0012]優(yōu)選的，所述動畫選擇窗口中還包括:
[0013]動畫庫添加接口，用于向CSS動畫庫中添加CSS代碼；
[0014]進一步的，還包括:
[0015]當在所述動畫選擇窗口中接收到用戶對所述動畫庫添加接口的觸發(fā)操作，則生成CSS代碼編輯界面；
[0016]在所述CSS代碼編輯界面中接收用戶編輯的CSS代碼，并根據(jù)用戶的操作將所述CSS代碼存入CSS動畫庫。
[0017]優(yōu)選的，所述動畫選擇窗口中還包括:
[0018]動畫刪除接口，用于刪除CSS動畫庫中于CSS動畫對應的CSS代碼；
[0019]進一步的，還包括:
[0020]當在所述動畫選擇窗口中接收到用戶對CSS動畫的動畫刪除接口的觸發(fā)操作，則將CSS動畫庫中相應的CSS代碼刪除。
[0021]優(yōu)選的，所述動畫選擇窗口中還包括:
[0022]動畫編輯接口，用于修改CSS動畫庫中與CSS動畫對應的CSS代碼；
[0023]進一步的，還包括:
[0024]當在所述動畫選擇窗口中接收到用戶對所述動畫編輯接口的觸發(fā)操作，則生成CSS代碼編輯界面，并將所述CSS動畫的CSS代碼加載至所述CSS代碼編輯界面中；
[0025]在所述CSS代碼編輯界面中接收用于對所述CSS代碼的修改，并根據(jù)用戶的操作將所述CSS代碼存入CSS動畫庫。
[0026]優(yōu)選的，所述網(wǎng)頁文檔中指定的頁面元素包括動畫添加類標識，包括:
[0027]所述網(wǎng)頁文檔中的指定div標簽中，包括動畫添加類標識。
[0028]優(yōu)選的，在所述tab頁面中對應動畫添加類標識的頁面元素之中，添加所述CSS動畫并渲染展示之前，包括
[0029]針對所述CSS動畫，根據(jù)當前展示tab頁面的瀏覽器內(nèi)核類型，選擇相應的CSS代碼；
[0030]通過JS腳本將所述CSS代碼，添加到當前tab頁面內(nèi)進行渲染展示。
[0031]優(yōu)選的，在所述tab頁面中對應動畫添加類標識的頁面元素之中，添加所述CSS動畫并渲染展示之前，還包括:
[0032]在所述網(wǎng)頁文檔編輯器的動畫選擇窗口中，選擇CSS動畫的屬性信息；所述屬性信息包括:動畫時長、動畫延時、動畫循環(huán)次數(shù)其中至少一個。
[0033]優(yōu)選的，在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加所述CSS動畫的CSS代碼，包括:
[0034]在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加適配各種瀏覽器內(nèi)核的所述CSS動畫的CSS代碼。
[0035]優(yōu)選的，所述網(wǎng)頁文檔中指定的頁面元素中還包括動畫添加位置提示內(nèi)容；
[0036]進一步的，所述在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加所述CSS動畫的CSS代碼之前，還包括:
[0037]在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中，刪除所述頁面元素內(nèi)容中的動畫添加位置提示內(nèi)容。
[0038]根據(jù)本發(fā)明的另外一個方面，本發(fā)明還公開了一種動畫展示的裝置，包括:
[0039]頁面加載模塊，適于加載待添加CSS動畫的網(wǎng)頁文檔，獲得tab頁面；所述網(wǎng)頁文檔中指定的頁面元素包括動畫添加類標識；
[0040]選擇窗口觸發(fā)模塊，適于在tab頁面中，對應動畫添加類標識的頁面元素之上，根據(jù)用戶的觸發(fā)操作啟動動畫選擇窗口；
[0041]預展示模塊，適于當在所述動畫選擇窗口接收到用戶對一個CSS動畫的指定操作后，在個彈出窗口中展不所述CSS動畫；
[0042]網(wǎng)頁展示模塊，適于當用戶確定選擇所述CSS動畫之后，在所述tab頁面中對應動畫添加類標識的頁面元素之中，添加所述CSS動畫并渲染展示；
[0043]動畫代碼修改模塊，適于在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加所述CSS動畫的CSS代碼。
[0044]優(yōu)選的，所述動畫選擇窗口中還包括:
[0045]動畫庫添加接口，用于向CSS動畫庫中添加CSS代碼；
[0046]進一步的，還包括:
[0047]第一動畫編輯模塊，適于當在所述動畫選擇窗口中接收到用戶對所述動畫庫添加接口的觸發(fā)操作，則生成CSS代碼編輯界面；
[0048]第一動畫存儲模塊，適于在所述CSS代碼編輯界面中接收用戶編輯的CSS代碼，并根據(jù)用戶的操作將所述CSS代碼存入CSS動畫庫。
[0049]優(yōu)選的，所述動畫選擇窗口中還包括:
[0050]動畫刪除接口，用于刪除CSS動畫庫中于CSS動畫對應的CSS代碼；
[0051]進一步的，還包括:
[0052]刪除模塊，適于當在所述動畫選擇窗口中接收到用戶對CSS動畫的動畫刪除接口的觸發(fā)操作，則將CSS動畫庫中相應的CSS代碼刪除。
[0053]優(yōu)選的，所述動畫選擇窗口中還包括:
[0054]動畫編輯接口，用于修改CSS動畫庫中與CSS動畫對應的CSS代碼；
[0055]進一步的，還包括:
[0056]第二動畫編輯模塊，適于當在所述動畫選擇窗口中接收到用戶對所述動畫編輯接口的觸發(fā)操作，則生成CSS代碼編輯界面，并將所述CSS動畫的CSS代碼加載至所述CSS代碼編輯界面中；
[0057]第二動畫存儲模塊，適于在所述CSS代碼編輯界面中接收用于對所述CSS代碼的修改，并根據(jù)用戶的操作將所述CSS代碼存入CSS動畫庫。
[0058]優(yōu)選的，所述網(wǎng)頁文檔中指定的頁面元素包括動畫添加類標識，包括:
[0059]所述網(wǎng)頁文檔中的指定div標簽中，包括動畫添加類標識。
[0060]優(yōu)選的，所述網(wǎng)頁展示模塊，包括:
[0061]第一代碼選擇模塊，適于針對所述CSS動畫，根據(jù)當前展示tab頁面的瀏覽器內(nèi)核類型，選擇相應的CSS代碼；
[0062]網(wǎng)頁代碼實時展示模塊，適于通過JS腳本將所述CSS代碼，添加到當前tab頁面內(nèi)進行渲染展示。
[0063]優(yōu)選的，所述網(wǎng)頁展示模塊之前，還包括:
[0064]屬性信息確定模塊，適于在所述網(wǎng)頁文檔編輯器的動畫選擇窗口中，選擇CSS動畫的屬性信息；所述屬性信息包括:動畫時長、動畫延時、動畫循環(huán)次數(shù)其中至少一個。
[0065]優(yōu)選的，所述動畫代碼修改模塊包括:
[0066]編輯代碼修改模塊，適于在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中與頁面元素對應的位置，添加適配各種瀏覽器內(nèi)核的所述CSS動畫的CSS代碼。
[0067]優(yōu)選的，所述網(wǎng)頁文檔中指定的頁面元素中還包括動畫添加位置提示內(nèi)容；
[0068]進一步的，所所述編輯代碼修改模塊之前還包括:提示內(nèi)容刪除模塊，適于在網(wǎng)頁文檔編輯器中的所述網(wǎng)頁文檔中，刪除所述頁面元素內(nèi)容中的動畫添加位置提示內(nèi)容。
[0069]根據(jù)本發(fā)明的動畫展示的方法可以對網(wǎng)頁文檔中包括了動畫添加類標識的指定頁面元素，在瀏覽器中實現(xiàn)在該指定的頁面元素之上，根據(jù)用戶的操作，觸發(fā)動畫選擇窗口，用戶在該動畫選擇窗口中選擇CSS動畫時，可以先在彈出窗口中對用戶指示的每個CSS動畫進行預覽，在用戶確定之后，再將該CSS動畫在tab頁面的中進行渲染展示，然后在HTML文檔編輯器中的網(wǎng)頁文檔代碼中，在上述頁面元素位置添加對應所述CSS動畫的CSS代碼，由此解決了先編輯網(wǎng)頁文檔，再去瀏覽器中刷新預覽效果的方案中，以在動畫效果不清楚的情況下，對CSS代碼進行修改，需要開發(fā)者不斷來回切換，以保證對CSS代碼的修改能夠得到動畫效果符合需求的代碼，其存在動畫編輯效率低的問題，取得了可以不用來回切換編輯器和瀏覽器，可直接通過瀏覽器確定需要的CSS動畫，從而確定CSS代碼，提高了動畫編輯效率的有益效果；并且，本發(fā)明實施例在動畫選擇界面中，用戶選擇CSS動畫時，采用彈出窗口展示其當前指定的動畫的形式，取得了方便用戶快速選擇其需求的動畫，不用每次到具體的tab頁面中才能知道選擇了哪種動畫，提高動畫選擇效率，進一步提高網(wǎng)頁文檔的編輯效率的有益效果。
[0070]上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點能夠更明顯易懂，以下特舉本發(fā)明的【具體實施方式】。
【附圖說明】
[0071]通過閱讀下文優(yōu)選實施方式的詳細描述，各種其他的優(yōu)點和益處對于本領域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中:
[0072]圖1示出了根據(jù)本發(fā)明一個實施例的一種動畫展示的方法的流程示意圖；
[0073]圖1A、1B、1C是CSS動畫的一種示例；
[0074]圖1D是本發(fā)明實施例的添加CSS動畫的網(wǎng)頁文檔的展示示例；
[0075]圖1E是本發(fā)明在圖1D的頁面元素上觸發(fā)得到的動畫選擇界面示例；
[0076]圖1F是在圖1E的動畫選擇界面上指定CSS動畫時的展示示例；
[0077]圖1G和圖1H是在圖1F上選定CSS動畫后tab頁面的渲染展示示例；
[0078]圖2示出了根據(jù)本發(fā)明一個實施例的一個實施例的一種動畫展示的方法的流程示意圖；
[0079]圖3示出了根據(jù)本發(fā)明一個實施例的一個實施例的一種動畫展示的裝置的結(jié)構(gòu)不意圖；以及
[0080]圖4示出了根據(jù)本發(fā)明一個實施例的一個實施例的一種動畫展示的裝置的結(jié)構(gòu)
示意圖。【具體實施方式】
[0081]下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應當理解，可以以各種形式實現(xiàn)本公開而不應被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達給本領域的技術(shù)人員。
[0082]本發(fā)明實施例的核心思想之一在于:本發(fā)明實施例可以對網(wǎng)頁文檔中包括了動畫添加類標識的指定頁面元素，在瀏覽器中實現(xiàn)在該指定的頁面元素之上，根據(jù)用戶的操作，觸發(fā)動畫選擇窗口，然后通過該動畫選擇窗口，在上述頁面元素之中添加一個CSS動畫，然后瀏覽器即可實時對該CSS動畫進行渲染展示，在用戶確定添加哪一個CSS動畫之后，則在HTML文檔編輯器中的網(wǎng)頁文檔代碼中，在上述頁面元素位置添加對應所述CSS動畫的CSS代碼，由此解決了先編輯網(wǎng)頁文檔，再去瀏覽器中刷新預覽效果的方案中，以在動畫效果不清楚的情況下，對CSS代碼進行修改，需要開發(fā)者不斷來回切換，以保證對CSS代碼的修改能夠得到動畫效果符合需求的代碼，其存在動畫編輯效率低的問題，取得了可以不用來回切換編輯器和瀏覽器，可直接通過瀏覽器確定需要的CSS動畫，從而確定CSS代碼，提高了動畫編