多媒體技術(shù)與應(yīng)用：第4章 二維圖形動畫原理

1第4章二維圖形動畫原理學(xué)習(xí)提示：基于XML規(guī)范的多媒體應(yīng)用有XHTML、SVG/XAML、X3D等，可形成媒體的整體解決方案。本章將系統(tǒng)敘述XML二維圖形動畫應(yīng)用——XAML的基本原理，為后面介紹二維圖形動畫的具體應(yīng)用奠定理論基礎(chǔ)。本章主要以代碼的方式敘述XAML，建議結(jié)合第11章進(jìn)行上機(jī)實驗。本章學(xué)習(xí)目標(biāo)如下：l 理解SVG/XAML是XML二維圖形動畫媒體應(yīng)用。l 掌握XAML常用元素的功能和用法。l 掌握XAML布局容器。l 掌握XAML坐標(biāo)系變換。l 理解XAML路徑(二維形狀定義標(biāo)準(zhǔn))，路徑與規(guī)則形狀的相互關(guān)系。l 理解XAML形狀填涂為圖形的機(jī)制(圖形格式)。筆畫與填充，單色、漸變色、圖案，透明度。l 理解XAML效果。l 掌握XAML動畫。l 理解XAML屏蔽/剪切路徑。l 掌握XAML與外部媒體引用。l 理解XAML資源與引用。l 掌握XAML超鏈接。24.1XML二維圖形動畫應(yīng)用XAML/Silverlight簡介XAML還著力解決本機(jī)應(yīng)用程序界面(典型地如Windows窗口界面機(jī)制)與Web應(yīng)用程序界面(典型地如IE等瀏覽器窗口中XHTML文檔界面機(jī)制)的技術(shù)統(tǒng)一，Web是XAML/Silverlight技術(shù)；本機(jī)是XAML/.NETWPF技術(shù)。XAML/Silverlight是XAML/.NETWPF的一個子集，原理機(jī)制完全一致，只是可實現(xiàn)的功能范圍有所差異而已。這樣界面只要設(shè)計一次，Web、本機(jī)都可使用，這無疑會大大地提高軟件系統(tǒng)的開發(fā)效率。XAML是eXtensibleApplicationMarkupLanguage的首字母縮寫，中文意譯為可擴(kuò)展應(yīng)用程序標(biāo)記語言，當(dāng)前最高版本是3.0。XAML是一種描述Web/本機(jī)二維圖形動畫的語言。XAML二維圖形動畫技術(shù)擁有當(dāng)前流行的二維圖形動畫的基本功能，還具有可交換性、交互性、可擴(kuò)展性、易維護(hù)性等優(yōu)點，可完美結(jié)合XHTML、腳本語言等實現(xiàn)強(qiáng)大的Web/本機(jī)多媒體應(yīng)用。XAML和XHTML在語法、功能等眾多方面都具有相似性。只不過XHTML偏重于超文本理念，而XAML偏重于二維圖形理念。將XAML與XHTML對比理解，是掌握XAML的捷徑。XAML文檔屬于互動式二維圖形動畫視覺媒體，基本原理可參見第1章中與互動式二維圖形動畫緊密相關(guān)的內(nèi)容，特別是二維布局、時間特性、交互性等。該部分則將以代碼的方式敘述XAML，XAML功能強(qiáng)大、元素及其特性豐富，應(yīng)該注重掌握XAML的基本原理，并結(jié)合ExpressionBlend軟件(將在第11章詳述)進(jìn)行操作實驗。34.2XAML文檔結(jié)構(gòu)、元素、CSS、DOM1.

XAML文檔基本結(jié)構(gòu)2.

XAML文檔架構(gòu)及其元素概述(1)布局系統(tǒng)(LayoutPanel)類元素(2)布局變換(Transform)類元素(3)路徑(Path)類元素(4)基本形狀(BasicShape)類元素(5)文本(Text)類元素(6)填涂(Painter)類元素(7)效果(Effect)類元素(8)屏蔽/剪切(Mask/Clip)類元素(9)外部媒體引用(ExternalReference)類元素(10)動畫(Animation)類元素(11)超鏈接(Hyperlink)類元素(12)控件(Control)類元素(13)

EventTrigger3.關(guān)于XAML特性元素4.關(guān)于XAML標(biāo)記擴(kuò)展5.

XAML文檔樣式與CSS6.

XAML文檔邏輯結(jié)構(gòu)與DOM44.3XAML文檔編輯和瀏覽1.

XAML文檔瀏覽(1)本機(jī)瀏覽(2)瀏覽器中瀏覽(3)本機(jī)瀏覽與瀏覽器中瀏覽的異同2.

XAML文檔編輯54.4XAML布局1.布局系統(tǒng)、元素占位、文檔尺寸(1)

Canvas布局元素。(2)

Grid布局元素。(3)

StackPanel布局元素(4)

ScrollViewer布局元素。(5)

Border布局元素(6)

XAML還允許結(jié)合JScript、C#等編程創(chuàng)建自定義布局系統(tǒng)，涉及系統(tǒng)的編程知識，根據(jù)立體化課程理念，將在后續(xù)課程涉及。2.坐標(biāo)系變換3.層64.5XAML路徑——二維形狀定義標(biāo)準(zhǔn)XAML使用<Path>(路徑元素)來生成復(fù)雜的曲線或圖形輪廓，然后通過進(jìn)一步處理(如填充、筆畫等填涂)而獲得XAML復(fù)雜圖形效果。圖4-6示例文件path-Ellipse.xaml的運(yùn)行結(jié)果路徑(Path)是二維形狀定義的標(biāo)準(zhǔn)。任何圖形的輪廓(又稱為形狀)都可理解為是由一條或一組曲線進(jìn)行描述的，而任何曲線又都是通過一組點進(jìn)行定義的。代碼4-5所示的示例使用<Path>元素生成了一個橢圓，運(yùn)行結(jié)果如圖4-6所示。參見教材P9174.6XAML基本形狀圖4-7示例文件basicShape-Ellipse.xaml的運(yùn)行結(jié)果XAML基本形狀是指數(shù)學(xué)規(guī)律上較簡單的曲線或圖形輪廓，如直線、矩形、橢圓等?；拘螤钸M(jìn)一步處理(如填充、筆畫等填涂)而獲得圖形效果。XAML包含下列常用的基本形狀元素:<Ellipse>、<Line>、<Polygon>、<Polyline>、<Rectangle>等，在此以<Ellipse>元素生成一個橢圓為例進(jìn)行敘述，其他規(guī)則形狀元素將在11.7.2節(jié)結(jié)合上機(jī)實驗敘述。代碼4-6所示的示例使用<Ellipse>元素生成了一個橢圓，運(yùn)行結(jié)果如圖4-7所示，和圖4-6所示的使用<Path>元素生成橢圓的結(jié)果完全相同，可見，<Path>元素生成形狀是通用的，而<Ellipse>基本形狀元素則可更快捷生成規(guī)則的形狀，并可減小文件的復(fù)雜性和容量。參見教材P9384.7XAML形狀的填涂/畫筆使用<Path>或<Ellipse>等基本形狀元素生成各種形狀后，再對形狀進(jìn)行填涂，就可獲得想要的圖形效果。填涂可以分別對形狀的Stroke(筆畫，即形狀的輪廓線)和Fill(填充，即形狀的內(nèi)部)進(jìn)行。填涂的內(nèi)容可以是SolidColor(單色)，Gradient(漸變色)或Pattern(圖案)。還可設(shè)置Opacity(不透明度)、Mask/Clip(屏蔽/剪切)、Effect(效果)等。94.7.1筆畫和填充一個XAML形狀可分為筆畫和填充兩部分分別進(jìn)行填涂處理，筆畫部分是指形狀的輪廓線；填充部分是指形狀輪廓線包圍的內(nèi)部區(qū)域。代碼4-7是對形狀的筆畫和填充分別進(jìn)行處理的一個示例，運(yùn)行結(jié)果如圖4?8所示。參見教材P93104.7.2單色圖4-8中，筆畫和填充部分填涂的就是單色。顏色機(jī)制參見1.3.1節(jié)、3.6.4節(jié)。為了方便使用和兼顧兼容性，顏色可以選用如下表示方法。(1)可以用一個顏色關(guān)鍵詞。常用的顏色關(guān)鍵詞是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。如：Stroke="Black"。(2)

#符號后緊跟2位十六進(jìn)制的不透明度數(shù)值+6位十六進(jìn)制的顏色數(shù)值來表示。如：Fill="#FF0D5C88"。114.7.3漸變色代碼4-8是為形狀的填充部分填涂漸變色的示例，運(yùn)行結(jié)果如圖4?9所示。更多的漸變色將在11.7.5節(jié)結(jié)合上機(jī)實驗詳述。參見教材P94124.7.4圖案圖案(Pattern)可以是圖形圖案(如填充外部XAML代碼文件，<ImageBrush>元素定義)，也可以是圖像圖案(Texture，又稱為材圖、紋理，<ImageBrush>元素定義)，還可以是視頻圖案(<VideoBrush>元素定義)。代碼4-9是為圖形的填充部分填涂圖像圖案的示例，運(yùn)行結(jié)果如圖4?10所示。更多的圖案將在11.7.5節(jié)結(jié)合上機(jī)實驗詳述。參見教材P95134.7.5不透明度透明度機(jī)制參見1.3.1節(jié)，又常以O(shè)pacity(不透明度)方式表示，以[0，1.0]區(qū)間值表示，默認(rèn)值為1.0，即完全不透明。代碼4-10是為XAML圖形應(yīng)用透明度的一個示例，運(yùn)行結(jié)果如圖4-11所示。參見教材P96144.7.6屏蔽/剪切屏蔽/剪切類元素作為形狀類元素的特性元素而使用，用來獲得通常繪畫方法難以獲得的透明效果。代碼4-11是不透明度屏蔽的一個示例，運(yùn)行結(jié)果如圖4-12所示。參見教材P96代碼4-12是剪切的一個示例，運(yùn)行結(jié)果如圖4-13所示。參見教材P97 154.7.7效果XAML支持通過元素的effect特性元素來獲得效果。代碼4-13是為XAML圖形應(yīng)用效果的一個示例。參見教材P98應(yīng)用了效果的XAML文檔不能直接在IE中調(diào)用Silverlight插件瀏覽，必須編譯后瀏覽。effect.xaml的運(yùn)行結(jié)果如圖4-14所示，獲得了通常的圖形編輯方法難以獲得的陰影視覺效果。XAML效果(Effect)有時也稱為濾鏡(Filter)，是調(diào)用預(yù)先編寫好的用來獲得圖形、圖像特效的組件程序而獲得效果。XAML效果的功能主要依靠XAML瀏覽器(如Silverlight)所支持的大量預(yù)定義的效果功能。164.8XAML文本在XAML文檔中需要使用文本時，可以使用<TextBlock>、<TextBox>、<PasswordBox>等生成文本并根據(jù)文本布局特性進(jìn)行布局。代碼4-14是<TextBlock>元素生成一行文本的示例，運(yùn)行結(jié)果如圖4?15所示。參見教材P99XAML中的文本與其他二維圖形元素的機(jī)制類似，所以適用于二維圖形元素的特性，也同樣適用于<text>元素，如二維坐標(biāo)變換等。XAML中的文本可以看作具有文本布局特性的形狀，因此文本排版功能不及XHTML等面向文本的機(jī)制，但更容易獲得文本的圖形化視覺效果。174.9XAML與外部媒體引用XAML可以直接定義二維圖形動畫、文本，同時可以引用集成外部文本、圖像、圖形、視頻、動畫、波形音頻、MIDI器樂等已保存為文件的媒體。此外XAML文檔支持引用已保存為文件的其他XAML文檔，這樣有利于XAML文檔的擴(kuò)展式重復(fù)使用。代碼4-15是通過<Image>元素引用外部圖像的一個示例，運(yùn)行結(jié)果如圖4-16所示。參見教材P100184.10XAML動畫XAML支持動畫，動畫的基本原理參見1.5.1節(jié)。從動畫機(jī)制的角度，XAML提供兩大類動畫類型，即內(nèi)插幀動畫和持續(xù)幀動畫。194.10.1內(nèi)插幀動畫代碼4-18的示例使用<DoubleAnimationUsingKeyFrames>元素對<Rectangle>元素的透明度屬性值隨時間/關(guān)鍵幀而進(jìn)行內(nèi)插值計算，從而獲得<Rectangle>元素生成的矩形的透明度隨時間變化的動畫效果，屬于內(nèi)插幀動畫。運(yùn)行結(jié)果將如圖4?17所示，獲得矩形慢慢消失的動畫效果。內(nèi)插幀動畫機(jī)制常用于對象屬性賦數(shù)值等可進(jìn)行內(nèi)插幀計算的動畫效果。參見教材P102

204.10.2持續(xù)幀動畫代碼4-19的示例使用<ObjectAnimationUsingKeyFrame>元素隨時間/關(guān)鍵幀不斷顯示新的對象或?qū)ο髮傩?，并使對象或?qū)ο髮傩灾党掷m(xù)想要的時間，而不是進(jìn)行內(nèi)插幀計算，屬于持續(xù)幀動畫運(yùn)行結(jié)果將如圖4-18所示，獲得矩形在三種顏色之間切換的動畫效果。持續(xù)幀動畫機(jī)制常用于不需要或無法進(jìn)行內(nèi)插幀計算的動畫效果。參見教材P103

214.11XAML與超鏈接作為互動式二維圖形動畫，XAML支持超鏈接的功能，這與XHTML超鏈接類似(參見3.7.1節(jié))。XAML超鏈接通過<HyperlinkButton>元素實現(xiàn)，代碼4-20是一個示例。不過基于安全性考慮，必須編譯后才能運(yùn)行。XAML超鏈接是驅(qū)動XAML互動式應(yīng)用的重要機(jī)制。參見教材P104XAML從媒體的角度可稱為超二維圖形動畫媒體。XAML編輯者則可在超鏈接(事件)驅(qū)動為主導(dǎo)還是動畫(時間)驅(qū)動為主導(dǎo)之間做出選擇。224.12XAML資源定義與引用XAML資源的目的是為了重用，資源通過特性元素定義，然后通過標(biāo)記擴(kuò)