第10章動畫與多媒體

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

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

3、viorRepeatBehavior屬性屬性uAutoReverseAutoReverse屬性屬性uBeginTimeBeginTime屬性屬性uFillBehaviorFillBehavior屬性屬性u控制時間線速度的屬性控制時間線速度的屬性（SpeedRatioSpeedRatio、AccelerationRatioAccelerationRatio、DecelerationRatioDecelerationRatio屬性屬性）5利用利用Duration屬性屬性控制動畫控制動畫l例例10-1 (a) 初始效果初始效果 (b) 動畫播放期間的效果動畫播放期間的效果6利用利用RepeatBeh

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

5、本動畫可控制多種類型，這些動畫的命名約定為Animation可用的可用的有：有：Byte、Int16、Int32、Int64、Single、Double、Decimal、Color、Point、Size、Thickness、Rect、Vector、Vector3D、Quaternion、Rotation3D。在這些動畫類型中，常用有在這些動畫類型中，常用有DoubleAnimation、ColorAnimation和和PointAnimation。11From/To/By動畫的基本用法（假定基值為動畫的基本用法（假定基值為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.用本地動畫實現(xiàn)基本動畫用本地動畫實現(xiàn)基本動畫l本地動畫是指直接對對象的屬性值進行處理的動

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

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

9、幀動畫中插入緩動函數(shù)1.關鍵幀動畫類型關鍵幀動畫類型l關鍵幀動畫類型是內(nèi)插關鍵幀的容器。關鍵幀動畫類型是內(nèi)插關鍵幀的容器。l關鍵幀動畫類型的命名約定為關鍵幀動畫類型的命名約定為 AnimationUsingKeyFramesAnimationUsingKeyFrames在每個關鍵幀動畫類型的開始標記和結(jié)束標記之間，都可以使用在每個關鍵幀動畫類型的開始標記和結(jié)束標記之間，都可以使用多種內(nèi)插關鍵幀類型，每個內(nèi)插關鍵幀都由關鍵時間和關鍵值組多種內(nèi)插關鍵幀類型，每個內(nèi)插關鍵幀都由關鍵時間和關鍵值組成。成。18關鍵幀動畫可控制的屬性類型以及可用的內(nèi)插方法關鍵幀動畫可控制的屬性類型以及可用的內(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制作關鍵幀動畫制作關鍵幀動畫l在在Window 7下制作關鍵幀動畫

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

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

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

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

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

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

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

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

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

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

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