第10章動(dòng)畫與多媒體

1、教育部普通高等教育十二五國家級(jí)規(guī)劃教材教育部普通高等教育十二五國家級(jí)規(guī)劃教材C#程序設(shè)計(jì)及應(yīng)用教程程序設(shè)計(jì)及應(yīng)用教程第第3版版（包括簡(jiǎn)化版：（包括簡(jiǎn)化版：C#程序設(shè)計(jì)教程程序設(shè)計(jì)教程第第3版）版）第第10章章 動(dòng)畫與多媒體動(dòng)畫與多媒體2Ch10 動(dòng)畫與多媒體動(dòng)畫與多媒體10.1 WPF動(dòng)畫基礎(chǔ)動(dòng)畫基礎(chǔ)10.2 基本動(dòng)畫基本動(dòng)畫10.3 關(guān)鍵幀動(dòng)畫關(guān)鍵幀動(dòng)畫10.4 路徑動(dòng)畫路徑動(dòng)畫10.5 用代碼實(shí)現(xiàn)變換用代碼實(shí)現(xiàn)變換10.6 對(duì)繪圖結(jié)果對(duì)繪圖結(jié)果進(jìn)行效果處理進(jìn)行效果處理10.7 音頻和視頻的播放音頻和視頻的播放310.1 WPF動(dòng)畫基礎(chǔ)動(dòng)畫基礎(chǔ)l在在WPF應(yīng)用程序中，所有可見對(duì)象都可以實(shí)現(xiàn)動(dòng)

2、畫功能應(yīng)用程序中，所有可見對(duì)象都可以實(shí)現(xiàn)動(dòng)畫功能，具體，具體的實(shí)現(xiàn)可以分為的實(shí)現(xiàn)可以分為兩大類動(dòng)畫技術(shù)兩大類動(dòng)畫技術(shù)。410.1 WPF動(dòng)畫基礎(chǔ)動(dòng)畫基礎(chǔ)l除了逐幀動(dòng)畫以外，本地動(dòng)畫、時(shí)鐘動(dòng)畫以及演示圖板動(dòng)畫都除了逐幀動(dòng)畫以外，本地動(dòng)畫、時(shí)鐘動(dòng)畫以及演示圖板動(dòng)畫都是基于是基于Timeline類來實(shí)現(xiàn)的。類來實(shí)現(xiàn)的。Timeline類是定義計(jì)時(shí)行為的抽象基類。該抽象類提供了控制動(dòng)類是定義計(jì)時(shí)行為的抽象基類。該抽象類提供了控制動(dòng)畫播放的屬性，從該類繼承的各種動(dòng)畫類都可以使用這些屬性畫播放的屬性，從該類繼承的各種動(dòng)畫類都可以使用這些屬性。uDurationDuration屬性屬性u(píng)RepeatBeha

3、viorRepeatBehavior屬性屬性u(píng)AutoReverseAutoReverse屬性屬性u(píng)BeginTimeBeginTime屬性屬性u(píng)FillBehaviorFillBehavior屬性屬性u(píng)控制時(shí)間線速度的屬性控制時(shí)間線速度的屬性（SpeedRatioSpeedRatio、AccelerationRatioAccelerationRatio、DecelerationRatioDecelerationRatio屬性屬性）5利用利用Duration屬性屬性控制動(dòng)畫控制動(dòng)畫l例例10-1 (a) 初始效果初始效果 (b) 動(dòng)畫播放期間的效果動(dòng)畫播放期間的效果6利用利用RepeatBeh

4、avior屬性屬性控制動(dòng)畫控制動(dòng)畫l例例10-2 7利用利用AutoReverse屬性屬性控制動(dòng)畫控制動(dòng)畫l例例10-3 8利用利用SpeedRatio、AccelerationRatio、DecelerationRatio屬性屬性控制動(dòng)畫控制動(dòng)畫l例例10-4 不同速度控制的運(yùn)行效果不同速度控制的運(yùn)行效果910.2 基本動(dòng)畫基本動(dòng)畫l基本動(dòng)畫類型基本動(dòng)畫類型l用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫l用用Storyboard實(shí)現(xiàn)基本動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫l用時(shí)鐘動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用時(shí)鐘動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫101.基本動(dòng)畫類型基本動(dòng)畫類型WPF提供的基本動(dòng)畫可控制多種類型，這些動(dòng)畫的命名約定為提供的基

5、本動(dòng)畫可控制多種類型，這些動(dòng)畫的命名約定為Animation可用的可用的有：有：Byte、Int16、Int32、Int64、Single、Double、Decimal、Color、Point、Size、Thickness、Rect、Vector、Vector3D、Quaternion、Rotation3D。在這些動(dòng)畫類型中，常用有在這些動(dòng)畫類型中，常用有DoubleAnimation、ColorAnimation和和PointAnimation。11From/To/By動(dòng)畫的基本用法（假定基值為動(dòng)畫的基本用法（假定基值為120）格格 式式舉舉 例例說說 明明From 起始值起始值 To 結(jié)束

6、值結(jié)束值From 50 To 200從起始值從起始值50逐漸變化到結(jié)束值逐漸變化到結(jié)束值200From 起始值起始值 By 偏移量偏移量From 50 By 150從起始值從起始值50逐漸變化到逐漸變化到200（即（即50+150）From 起始值起始值From 50從起始值從起始值50逐漸變化到基值逐漸變化到基值120To 結(jié)束值結(jié)束值To 150從基值從基值120逐漸變化到結(jié)束值逐漸變化到結(jié)束值150By 偏移量偏移量By 50從基值從基值120逐漸變化到逐漸變化到170（即（即120+50） 122.用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫l本地動(dòng)畫是指直接對(duì)對(duì)象的屬性值進(jìn)行處理的動(dòng)

7、畫，這種動(dòng)畫本地動(dòng)畫是指直接對(duì)對(duì)象的屬性值進(jìn)行處理的動(dòng)畫，這種動(dòng)畫受計(jì)時(shí)系統(tǒng)支持，但不能對(duì)動(dòng)畫進(jìn)行暫停等交互操作。受計(jì)時(shí)系統(tǒng)支持，但不能對(duì)動(dòng)畫進(jìn)行暫停等交互操作。l本地動(dòng)畫只能用本地動(dòng)畫只能用C#代碼來實(shí)現(xiàn)，無法用代碼來實(shí)現(xiàn)，無法用XAML來描述。來描述。13用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫示例示例l10-5 用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用本地動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫運(yùn)行效果運(yùn)行效果143.用用Storyboard實(shí)現(xiàn)基本動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫l基本動(dòng)畫、關(guān)鍵幀動(dòng)畫、路徑動(dòng)畫都可以使用基本動(dòng)畫、關(guān)鍵幀動(dòng)畫、路徑動(dòng)畫都可以使用Storyboard來來實(shí)現(xiàn)。實(shí)現(xiàn)。l用用Storyboard實(shí)現(xiàn)動(dòng)畫時(shí)，既可

8、以用實(shí)現(xiàn)動(dòng)畫時(shí)，既可以用C#代碼來編寫，也可以代碼來編寫，也可以用用XAML來描述。來描述。15用用Storyboard實(shí)現(xiàn)基本動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫示例示例l例例10-6、10-7運(yùn)行效果運(yùn)行效果164.用時(shí)鐘動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫用時(shí)鐘動(dòng)畫實(shí)現(xiàn)基本動(dòng)畫l時(shí)鐘動(dòng)畫適用于處理大量類型相同而且需要交互的場(chǎng)合。時(shí)鐘動(dòng)畫適用于處理大量類型相同而且需要交互的場(chǎng)合。l例例10-8 運(yùn)行效果運(yùn)行效果1710.3 關(guān)鍵幀動(dòng)畫關(guān)鍵幀動(dòng)畫l關(guān)鍵幀動(dòng)畫類型關(guān)鍵幀動(dòng)畫類型l利用利用Blend for VS2012制作關(guān)鍵幀動(dòng)畫制作關(guān)鍵幀動(dòng)畫l在關(guān)鍵幀動(dòng)畫中插入樣條動(dòng)畫在關(guān)鍵幀動(dòng)畫中插入樣條動(dòng)畫l在關(guān)鍵幀動(dòng)畫中插入緩動(dòng)函數(shù)在關(guān)鍵

9、幀動(dòng)畫中插入緩動(dòng)函數(shù)1.關(guān)鍵幀動(dòng)畫類型關(guān)鍵幀動(dòng)畫類型l關(guān)鍵幀動(dòng)畫類型是內(nèi)插關(guān)鍵幀的容器。關(guān)鍵幀動(dòng)畫類型是內(nèi)插關(guān)鍵幀的容器。l關(guān)鍵幀動(dòng)畫類型的命名約定為關(guān)鍵幀動(dòng)畫類型的命名約定為 AnimationUsingKeyFramesAnimationUsingKeyFrames在每個(gè)關(guān)鍵幀動(dòng)畫類型的開始標(biāo)記和結(jié)束標(biāo)記之間，都可以使用在每個(gè)關(guān)鍵幀動(dòng)畫類型的開始標(biāo)記和結(jié)束標(biāo)記之間，都可以使用多種內(nèi)插關(guān)鍵幀類型，每個(gè)內(nèi)插關(guān)鍵幀都由關(guān)鍵時(shí)間和關(guān)鍵值組多種內(nèi)插關(guān)鍵幀類型，每個(gè)內(nèi)插關(guān)鍵幀都由關(guān)鍵時(shí)間和關(guān)鍵值組成。成。18關(guān)鍵幀動(dòng)畫可控制的屬性類型以及可用的內(nèi)插方法關(guān)鍵幀動(dòng)畫可控制的屬性類型以及可用的內(nèi)插方法WPF

10、可控制的屬性類型可控制的屬性類型Silverlight可控制的屬可控制的屬性類型性類型可用的內(nèi)插方法可用的內(nèi)插方法Boolean、Matrix、String、ObjectObject離散離散Byte、Color、Decimal、Double、Int16、Int32、Int64、Point、Rect、Quaternion、Vector Rotation3D、Single、Size、Thickness、Vector3DColor、Double、Point離散、線性、樣離散、線性、樣條條192.利用利用Blend for VS2012制作關(guān)鍵幀動(dòng)畫制作關(guān)鍵幀動(dòng)畫l在在Window 7下制作關(guān)鍵幀動(dòng)畫

11、或者路徑動(dòng)畫時(shí)，或者制作應(yīng)下制作關(guān)鍵幀動(dòng)畫或者路徑動(dòng)畫時(shí)，或者制作應(yīng)用程序原型時(shí)，一般借助用程序原型時(shí)，一般借助Blend+SketchFlow for VS2012來實(shí)來實(shí)現(xiàn)，這樣能極大地提高項(xiàng)目開發(fā)的效率?，F(xiàn)，這樣能極大地提高項(xiàng)目開發(fā)的效率。20Blend for VS2012的設(shè)計(jì)界面的設(shè)計(jì)界面21使用使用Blend for VS2012制作關(guān)鍵幀動(dòng)畫制作關(guān)鍵幀動(dòng)畫的的操作要點(diǎn)操作要點(diǎn)l創(chuàng)建演示圖板后才能利用時(shí)間線添加關(guān)鍵幀。創(chuàng)建演示圖板后才能利用時(shí)間線添加關(guān)鍵幀。l先選擇要對(duì)其進(jìn)行動(dòng)畫的對(duì)象，然后拖動(dòng)時(shí)間線到某個(gè)關(guān)鍵時(shí)先選擇要對(duì)其進(jìn)行動(dòng)畫的對(duì)象，然后拖動(dòng)時(shí)間線到某個(gè)關(guān)鍵時(shí)間，再修改該關(guān)

12、鍵時(shí)間的目標(biāo)屬性值。間，再修改該關(guān)鍵時(shí)間的目標(biāo)屬性值。l在事件觸發(fā)器中指定事件。在事件觸發(fā)器中指定事件。223. 在關(guān)鍵幀動(dòng)畫中插入樣條動(dòng)畫在關(guān)鍵幀動(dòng)畫中插入樣條動(dòng)畫l樣條動(dòng)畫使用三次貝塞爾曲線來實(shí)現(xiàn)，每條曲線段都由樣條動(dòng)畫使用三次貝塞爾曲線來實(shí)現(xiàn)，每條曲線段都由4個(gè)點(diǎn)個(gè)點(diǎn)來定義：起點(diǎn)、終點(diǎn)和中間的兩個(gè)控制點(diǎn)來定義：起點(diǎn)、終點(diǎn)和中間的兩個(gè)控制點(diǎn)。23樣條動(dòng)畫示例樣條動(dòng)畫示例l例例10-10244.在關(guān)鍵幀動(dòng)畫中插入緩動(dòng)函數(shù)在關(guān)鍵幀動(dòng)畫中插入緩動(dòng)函數(shù)l在內(nèi)插關(guān)鍵幀中，還可以將特殊的數(shù)學(xué)公式在內(nèi)插關(guān)鍵幀中，還可以將特殊的數(shù)學(xué)公式f(t)應(yīng)用于動(dòng)畫，應(yīng)用于動(dòng)畫，即隨著時(shí)間即隨著時(shí)間t的變化，將函數(shù)的

13、變化，將函數(shù)f(t)的值自動(dòng)插入到某個(gè)屬性值中的值自動(dòng)插入到某個(gè)屬性值中，從而實(shí)現(xiàn)各種特殊的動(dòng)畫效果。，從而實(shí)現(xiàn)各種特殊的動(dòng)畫效果。l這些實(shí)現(xiàn)特殊效果的數(shù)學(xué)公式稱為緩動(dòng)函數(shù)。這些實(shí)現(xiàn)特殊效果的數(shù)學(xué)公式稱為緩動(dòng)函數(shù)。25常用的緩動(dòng)函數(shù)常用的緩動(dòng)函數(shù)名名 稱稱說說 明明BackEase在某一動(dòng)畫開始沿指示的路徑進(jìn)行動(dòng)畫處理前稍稍收回在某一動(dòng)畫開始沿指示的路徑進(jìn)行動(dòng)畫處理前稍稍收回該動(dòng)畫的移動(dòng)。其效果類似跳遠(yuǎn)時(shí)先后退幾步再起跑該動(dòng)畫的移動(dòng)。其效果類似跳遠(yuǎn)時(shí)先后退幾步再起跑BounceEase創(chuàng)建具有彈跳效果的動(dòng)畫。一般使用創(chuàng)建具有彈跳效果的動(dòng)畫。一般使用EaseOut模擬落地模擬落地的反彈效果。的反

14、彈效果。Bounces屬性獲取或設(shè)置彈跳次數(shù)，屬性獲取或設(shè)置彈跳次數(shù)，Bounciness屬性獲取或設(shè)置下一次反彈的幅度。該值越小屬性獲取或設(shè)置下一次反彈的幅度。該值越小表示彈性越好，值越大表示彈性越差表示彈性越好，值越大表示彈性越差CircleEase使用循環(huán)函數(shù)加速和減速的動(dòng)畫使用循環(huán)函數(shù)加速和減速的動(dòng)畫ElasticEase類似于彈簧在停止前來回振蕩的動(dòng)畫類似于彈簧在停止前來回振蕩的動(dòng)畫ExponentialEase使用指數(shù)公式加速和減速的動(dòng)畫使用指數(shù)公式加速和減速的動(dòng)畫PowerEase使用公式使用公式 f(t) = tp（其中，（其中，p等于等于Power屬性）加速和減屬性）加速和減

15、速的動(dòng)畫速的動(dòng)畫SineEase使用正弦公式加速和減速的動(dòng)畫使用正弦公式加速和減速的動(dòng)畫26緩動(dòng)函數(shù)動(dòng)畫示例緩動(dòng)函數(shù)動(dòng)畫示例l例例10-11272810.4 路徑動(dòng)畫路徑動(dòng)畫l使用使用PathGeometry繪制路徑繪制路徑l路徑動(dòng)畫類型路徑動(dòng)畫類型l利用利用Blend for VS2012制作路徑動(dòng)畫制作路徑動(dòng)畫1.使用使用PathGeometry繪制路徑繪制路徑l例例10-12 路徑標(biāo)記語法路徑標(biāo)記語法示例示例292. 路徑動(dòng)畫類型路徑動(dòng)畫類型lWPF提供的路徑動(dòng)畫類型有：提供的路徑動(dòng)畫類型有：PointAnimationUsingPathDoubleAnimationUsingPathM

16、atrixAnimationUsingPath30路徑動(dòng)畫類型示例路徑動(dòng)畫類型示例l例例10-13 PointAnimationUsingPath示例示例31路徑動(dòng)畫類型示例路徑動(dòng)畫類型示例l例例10-14 DoubleAnimationUsingPath示例示例32路徑動(dòng)畫類型示例路徑動(dòng)畫類型示例l例例10-15 MatrixAnimationUsingPath示例示例333.利用利用Blend for VS2012制作路徑動(dòng)畫制作路徑動(dòng)畫l在實(shí)際的項(xiàng)目開發(fā)中，一般借助在實(shí)際的項(xiàng)目開發(fā)中，一般借助Blend for VS2012讓其自動(dòng)生讓其自動(dòng)生成實(shí)現(xiàn)路徑動(dòng)畫的代碼。成實(shí)現(xiàn)路徑動(dòng)畫的代碼。

17、l在在Blend for VS2012中，開發(fā)人員只需要通過鼠標(biāo)拖動(dòng)和簡(jiǎn)單中，開發(fā)人員只需要通過鼠標(biāo)拖動(dòng)和簡(jiǎn)單操作，即可以讓其自動(dòng)生成對(duì)應(yīng)的路徑動(dòng)畫。操作，即可以讓其自動(dòng)生成對(duì)應(yīng)的路徑動(dòng)畫。34利用利用Blend for VS2012制作路徑動(dòng)畫制作路徑動(dòng)畫步驟步驟第第1步：步：在在Blend中繪制形狀和路徑中繪制形狀和路徑第第2步：步：在在Blend中將形狀和文本轉(zhuǎn)換為路徑中將形狀和文本轉(zhuǎn)換為路徑第第3步：步：在在Blend中合并和剪切路徑中合并和剪切路徑35利用利用Blend for VS2012制作路徑動(dòng)畫制作路徑動(dòng)畫示例示例l例例10-16 在在Blend中用鉛筆繪制一條螺旋狀路徑，然

18、后讓小球中用鉛筆繪制一條螺旋狀路徑，然后讓小球沿著該路徑移動(dòng)沿著該路徑移動(dòng)。363710.5 用代碼實(shí)現(xiàn)變換用代碼實(shí)現(xiàn)變換l二維變換二維變換基本概念基本概念l對(duì)變換進(jìn)行動(dòng)畫處理對(duì)變換進(jìn)行動(dòng)畫處理1. 二維變換基本概念二維變換基本概念l用戶通過用戶通過改變變換矩陣的值，可以旋轉(zhuǎn)、按比例縮放、扭曲和改變變換矩陣的值，可以旋轉(zhuǎn)、按比例縮放、扭曲和平移對(duì)象。平移對(duì)象。l用戶也可以通過用戶也可以通過WPF提供提供的的許多用起來更容易的變換類，可直許多用起來更容易的變換類，可直接對(duì)元素進(jìn)行變換操作接對(duì)元素進(jìn)行變換操作。38WPF的基本變換類型的基本變換類型類類 型型變換變換屬性屬性brushTransfo

19、rm，RelativeTransformContainerVisualTransformDrawingGroupTransformFrameworkElementRenderTransform，LayoutTransformGeometryTransformTextEffectTransformUIElementRenderTransform392. 對(duì)變換進(jìn)行動(dòng)畫處理對(duì)變換進(jìn)行動(dòng)畫處理l可以通過可以通過WPF控件的控件的Effect屬性對(duì)各種變換（平移、旋轉(zhuǎn)、縮屬性對(duì)各種變換（平移、旋轉(zhuǎn)、縮放、扭曲等）進(jìn)行動(dòng)畫處理。放、扭曲等）進(jìn)行動(dòng)畫處理。40對(duì)變換進(jìn)行動(dòng)畫處理示例對(duì)變換進(jìn)行動(dòng)畫處理示例l

20、例例10-19 對(duì)變換進(jìn)行動(dòng)畫處理對(duì)變換進(jìn)行動(dòng)畫處理示例示例414210.6 對(duì)繪圖結(jié)果對(duì)繪圖結(jié)果進(jìn)行效果處理進(jìn)行效果處理l模糊效果（模糊效果（BlurEffect）l陰影效果（陰影效果（DropShadowEffect）l文本效果（文本效果（TextEffect）1. 模糊效果（模糊效果（BlurEffect）l利用繼承自利用繼承自Effect的的BlurEffect類，可以使目標(biāo)紋理具有模糊類，可以使目標(biāo)紋理具有模糊效果（模擬通過離焦透鏡查看對(duì)象的情形）。效果（模擬通過離焦透鏡查看對(duì)象的情形）。l例例10-2043用用BlurEffect實(shí)現(xiàn)模糊效果實(shí)現(xiàn)模糊效果2. 陰影效果（陰影效果（D

21、ropShadowEffect）l利用繼承自利用繼承自Effect的的DropShadowEffect類，可以在目標(biāo)紋理類，可以在目標(biāo)紋理對(duì)象的周圍創(chuàng)建投影效果，比如柔和陰影、噪音、強(qiáng)烈投影以對(duì)象的周圍創(chuàng)建投影效果，比如柔和陰影、噪音、強(qiáng)烈投影以及外部發(fā)光效果等。及外部發(fā)光效果等。l例例10-2144用用DropShadowEffect實(shí)現(xiàn)陰影效果實(shí)現(xiàn)陰影效果3. 文本效果（文本效果（TextEffect）l對(duì)于模糊效果和陰影效果來說，對(duì)于模糊效果和陰影效果來說，Effect用于將所有字符作為一用于將所有字符作為一個(gè)整體進(jìn)行處理，而利用個(gè)整體進(jìn)行處理，而利用TextEffect，則可以對(duì)文本中的每個(gè)，則可以對(duì)文本中的每個(gè)字符進(jìn)行效果和變換處理。字符進(jìn)行效果和變換處理。l例例10-2245用用DropShadowEffect實(shí)現(xiàn)實(shí)現(xiàn)旋轉(zhuǎn)旋轉(zhuǎn)效果效果4610.7 音頻和視頻的播放音頻和視頻的播放l語音語音l音頻和視頻（音頻和視頻（MediaElement）lSoundPlayerAction類類1. 語音語音lMicrosoft.NET框架在框架在System.Speech.Synthesis.Speech