動(dòng)畫(huà)編輯的制作方法
【專利說(shuō)明】動(dòng)畫(huà)編輯
[0001 ] 背景
[0002] 層疊樣式表(CSS)指的是由W3C(萬(wàn)維網(wǎng)聯(lián)盟)所開(kāi)發(fā)的用于網(wǎng)頁(yè)內(nèi)容的格式化規(guī) 則。CSS還指的是能夠被用來(lái)定義以結(jié)構(gòu)化文檔(標(biāo)記)語(yǔ)音編寫(xiě)的文檔的外觀和格式化的 樣式表語(yǔ)言。CSS的最常見(jiàn)應(yīng)用是以HTML(超文本標(biāo)記語(yǔ)言)和XHTML(擴(kuò)展超文本標(biāo)記語(yǔ)言） 來(lái)編寫(xiě)的樣式網(wǎng)頁(yè)。CSS可運(yùn)行在任何XML型文檔上，XML型文檔包括但不限于HTML、XHTML、 SVG(可伸縮矢量圖形）以及XUL(XML用戶界面語(yǔ)言）文檔。使用結(jié)構(gòu)化文檔的一項(xiàng)方便的特 征是內(nèi)容可在各種上下文中重復(fù)使用并且可通過(guò)提供將不同的渲染規(guī)范與結(jié)構(gòu)化文檔一 起提供給CSS語(yǔ)言邏輯來(lái)以各種方式渲染。渲染規(guī)范可由樣式表提供，樣式表是描述顏色、 字體以及布局的樣式規(guī)則的集合。
[0003] 詞"層疊"指的是CSS確定特定元素最終如何顯示在網(wǎng)頁(yè)中的方式。用以顯示元素 的樣式受網(wǎng)頁(yè)作者所創(chuàng)建的樣式表的影響、受用戶定制的樣式選擇(如果有的話）的影響、 受顯示該頁(yè)面的瀏覽器的默認(rèn)樣式的影響、受CSS特異性(將不同權(quán)重賦予特定種類的CSS 規(guī)則的方法）的影響、以及受CSS規(guī)則的順序的影響，這產(chǎn)生了潛在沖突規(guī)則的復(fù)制的"層 疊"，其中具有較高優(yōu)先級(jí)的判斷覆蓋或"勝過(guò)"那些具有較低優(yōu)先級(jí)的判斷。
[0004] CSS將內(nèi)容（例如，HTML代碼）與定義該內(nèi)容看上去是什么樣（指的是內(nèi)容的"渲 染"）的CSS規(guī)則分開(kāi)。HTML代碼駐于HTML文件中，而定義內(nèi)容看上去是什么樣的CSS規(guī)則駐 于具有.css后綴的外部樣式表文件中。有時(shí)，定義內(nèi)容看上去是什么樣的CSS規(guī)則駐于HTML 文檔的特定部分內(nèi)。除了控制網(wǎng)站上的文本的外觀，CSS還可被用于控制塊級(jí)元素的格式和 定位。塊級(jí)元素通過(guò)使用諸如hi、p和div標(biāo)簽之類的標(biāo)簽來(lái)產(chǎn)生，以劃定被視作單個(gè)元素的 內(nèi)容塊。
[0005] CSS格式化規(guī)則由選擇符和聲明或者聲明框組成。選擇符可以是諸如hl、p之類的 標(biāo)簽、類名稱或標(biāo)識(shí)被格式化的元素的標(biāo)識(shí)符。聲明框定義要被應(yīng)用于所指示的內(nèi)容的樣 式屬性。例如，在以下規(guī)則中：
[0006] p{
[0007] font-size:12pt；
[0008] font-family:Arial；
[0009] font-weight: bold；
[0010] }
[0011 ]選擇符p指示段落的內(nèi)容將以12號(hào)加粗的Arial字體顯示。font-size(字體大?。?、 font-family(字體族）以及font-weight(字體粗細(xì))標(biāo)簽標(biāo)記段落內(nèi)容的屬性，而12號(hào)、 Arial以及bold(加粗)是相應(yīng)屬性的值。由于一個(gè)規(guī)則可應(yīng)用于許多標(biāo)簽(例如，在以上的 示例規(guī)則中，該規(guī)則可應(yīng)用于許多不同段落的內(nèi)容），因此使用同一規(guī)則來(lái)改變所有塊元素 的外觀可通過(guò)改變單個(gè)規(guī)則來(lái)實(shí)現(xiàn)。
[0012] 概述
[0013]在定義動(dòng)畫(huà)元素或一組動(dòng)畫(huà)元素的一個(gè)或多個(gè)文檔中的一組屬性和關(guān)鍵幀可被 收集并組合成表示完整的運(yùn)行時(shí)CSS動(dòng)畫(huà)的單個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)?？蔀樵摂?shù)據(jù)結(jié)構(gòu)計(jì)算一組 勝出的動(dòng)畫(huà)屬性。被樣式規(guī)貝>J (虛擬勝出的規(guī)則）的這組an imat ion-name (動(dòng)畫(huà)名稱)屬性所 參考的這組勝出的Okeyframes規(guī)則可被計(jì)算并表示在該數(shù)據(jù)結(jié)構(gòu)中。該數(shù)據(jù)結(jié)構(gòu)可被更新 以包括對(duì)勝出的屬性的指示。動(dòng)畫(huà)元素或一組動(dòng)畫(huà)元素的這組勝出的動(dòng)畫(huà)屬性可被用于根 據(jù)該數(shù)據(jù)結(jié)構(gòu)構(gòu)建該動(dòng)畫(huà)元素或一組動(dòng)畫(huà)元素的用戶界面(UI)表示。該表示可被用于在設(shè) 計(jì)期間預(yù)覽該動(dòng)畫(huà)元素或該組動(dòng)畫(huà)元素而無(wú)需運(yùn)行其中嵌入了該動(dòng)畫(huà)元素或該組動(dòng)畫(huà)元 素的應(yīng)用。動(dòng)畫(huà)元素或一組動(dòng)畫(huà)元素可被選擇以供預(yù)覽和/或修改?？赏ㄟ^(guò)經(jīng)由用戶界面 (UI)接收能夠改變影響該動(dòng)畫(huà)元素或該組動(dòng)畫(huà)元素的屬性的指令來(lái)更新表示該動(dòng)畫(huà)的數(shù) 據(jù)結(jié)構(gòu)。指令可以是用戶手勢(shì)的形式。操縱該動(dòng)畫(huà)元素或該組動(dòng)畫(huà)元素的用戶手勢(shì)可被轉(zhuǎn) 換或映射成對(duì)于內(nèi)部數(shù)據(jù)結(jié)構(gòu)以及對(duì)于該動(dòng)畫(huà)元素或該組動(dòng)畫(huà)元素被發(fā)現(xiàn)位于的網(wǎng)頁(yè)的 文檔閉包中的底層文檔的改變。
[0014] 對(duì)影響該動(dòng)畫(huà)的文檔所作出的改變可被檢測(cè)并應(yīng)用于該數(shù)據(jù)結(jié)構(gòu)。對(duì)與該動(dòng)畫(huà)相 關(guān)聯(lián)的文檔所作出的改變的效果可通過(guò)針對(duì)優(yōu)先序應(yīng)用標(biāo)準(zhǔn)CSS邏輯來(lái)計(jì)算。
[0015] 提供本概述以便以簡(jiǎn)化形式介紹將在以下詳細(xì)描述中進(jìn)一步描述的一些概念。本 概述并不旨在標(biāo)識(shí)所要求保護(hù)主題的關(guān)鍵特征或必要特征，也不旨在用于限制所要求保護(hù) 主題的范圍。
[0016] 附圖簡(jiǎn)述
[0017] 在附圖中：
[0018] 圖la解說(shuō)了 web應(yīng)用的示例；
[0019] 圖lb是圖la的一部分的更詳細(xì)的視圖；
[0020] 圖lc解說(shuō)了根據(jù)此處公開(kāi)的主題的各方面的用于編輯動(dòng)畫(huà)的系統(tǒng)100的示例；
[0021] 圖2解說(shuō)了根據(jù)此處公開(kāi)的主題的各方面的用于編輯動(dòng)畫(huà)的方法200的示例；
[0022] 圖3是根據(jù)此處所公開(kāi)主題的各方面的計(jì)算環(huán)境的示例的框圖；以及
[0023] 圖4是根據(jù)此處所公開(kāi)主題的各方面的集成開(kāi)發(fā)環(huán)境的示例的框圖。
[0024] 詳細(xì)描述 [0025] 概覽
[0026] 總得來(lái)說(shuō)，詞語(yǔ)"動(dòng)畫(huà)"指的是快速地顯示眼睛解讀為移動(dòng)的一系列圖像。一個(gè)常 見(jiàn)的動(dòng)畫(huà)類型是運(yùn)動(dòng)圖片。傳統(tǒng)電影用相機(jī)和投影儀來(lái)創(chuàng)建動(dòng)畫(huà)。另一個(gè)常見(jiàn)的動(dòng)畫(huà)類型 是視頻。視頻使用在顯示設(shè)備上快速顯示一系列圖像的軟件。CSS動(dòng)畫(huà)是一種使用腳本來(lái)定 義的動(dòng)畫(huà)。腳本使用用CSS來(lái)規(guī)定的規(guī)則和計(jì)算來(lái)定義動(dòng)畫(huà)元素。腳本描述動(dòng)畫(huà)屬性如何隨 時(shí)間變化，而不是描述每一幀動(dòng)畫(huà)中的圖像。動(dòng)畫(huà)通過(guò)隨時(shí)間將一組CSS樣式篡改為另一組 CSS樣式來(lái)創(chuàng)建。定義了持續(xù)時(shí)間，該持續(xù)時(shí)間允許系統(tǒng)將在關(guān)鍵幀子規(guī)則中規(guī)定的百分比 映射到實(shí)際時(shí)間。
[0027] 在CSS中，@keyframes(@關(guān)鍵幀）規(guī)則可被用于創(chuàng)建CSS動(dòng)畫(huà)。Okeyframes規(guī)則可包 括多個(gè)被稱為關(guān)鍵幀的子規(guī)則。發(fā)生在動(dòng)畫(huà)運(yùn)行時(shí)的圖像的位置和外觀的改變通過(guò)在關(guān)鍵 幀子規(guī)則中規(guī)定總動(dòng)畫(huà)運(yùn)行時(shí)間的百分比來(lái)指定，在該百分比處應(yīng)用特定CSS樣式規(guī)則。 0 %指的是播放動(dòng)畫(huà)的開(kāi)始，而100 %是動(dòng)畫(huà)播放完成的時(shí)刻。關(guān)鍵字"from"和"to"也可被 使用。"from"和0% -樣，而"to"和100% -樣。Okeyframes規(guī)則的語(yǔ)法是：
[0028] ikeyframes animationname{keyframes-selector{css-styles；}}
[0029] 其中"animationname"（動(dòng)畫(huà)名稱）規(guī)定動(dòng)畫(huà)的標(biāo)識(shí)符，而"keyframes-selector" (關(guān)鍵幀-選擇符)的值規(guī)定受影響的動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)的百分比。css-styles (CSS樣式)規(guī)定一 個(gè)或多個(gè)合法CSS屬性/值聲明。"keyframes-selector"的合法值是在0%和100%之間的任 意值?？蓪?duì)動(dòng)畫(huà)規(guī)定任意數(shù)目個(gè)"1^5^抑11168-8616〇1：01'"?？蓪?duì)特定1^5^抑1116 8-8616〇1：01'規(guī) 定任意數(shù)目個(gè)css-styles。動(dòng)畫(huà)或動(dòng)畫(huà)的一部分可由屬性"animationname"來(lái)標(biāo)識(shí)。被標(biāo)識(shí) 的動(dòng)畫(huà)或被標(biāo)識(shí)的動(dòng)畫(huà)的一部分可包括一個(gè)動(dòng)畫(huà)元素或者可包括一組動(dòng)畫(huà)元素。
[0030] CSS動(dòng)畫(huà)通常由一組標(biāo)準(zhǔn)CSS屬性來(lái)定義，這組標(biāo)準(zhǔn)CSS屬性一起工作來(lái)確定動(dòng)畫(huà) 將如何播放。定義動(dòng)畫(huà)的CSS屬性受標(biāo)準(zhǔn)CSS規(guī)則的監(jiān)管來(lái)確定屬性優(yōu)先序。根據(jù)經(jīng)標(biāo)準(zhǔn)化 的規(guī)則為動(dòng)畫(huà)計(jì)算每個(gè)單獨(dú)的屬性的最終值。占先的規(guī)則被稱為"勝出"規(guī)則。
[0031] 如此處所描述的動(dòng)畫(huà)開(kāi)發(fā)工具選擇要編輯的動(dòng)畫(huà)規(guī)則，從動(dòng)畫(huà)出現(xiàn)在其中的網(wǎng)頁(yè) 的文檔閉包中提取與以該規(guī)則規(guī)定的動(dòng)畫(huà)有關(guān)的文檔片段，并且根據(jù)該文檔片段創(chuàng)建合成 數(shù)據(jù)。數(shù)據(jù)結(jié)構(gòu)包括構(gòu)成該動(dòng)畫(huà)的一組Okeyframes規(guī)則的名稱以及控制該動(dòng)畫(huà)的定時(shí)屬性 (例如，延遲、持續(xù)時(shí)長(zhǎng)、重復(fù)、填充行為等）。動(dòng)畫(huà)的勝出?keyframes規(guī)則以及該勝出在@ keyframes規(guī)則規(guī)則內(nèi)的定義該Okeyframes規(guī)則內(nèi)的每個(gè)動(dòng)畫(huà)屬性在給定時(shí)間的值的勝出 的關(guān)鍵幀子規(guī)則可被計(jì)算。數(shù)據(jù)結(jié)構(gòu)可被修改以包括勝出的屬性，并因此能夠?yàn)閯?dòng)畫(huà)渲染 該勝出的值的完整渲染。