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

教育部普通高等教育十二五國(guó)家級(jí)規(guī)劃教材

《C#程序設(shè)計(jì)及應(yīng)用教程》第3版

（包括簡(jiǎn)化版：《C#程序設(shè)計(jì)教程》第3版）

第10章動(dòng)畫(huà)與多媒體2Ch10動(dòng)畫(huà)與多媒體10.1WPF動(dòng)畫(huà)基礎(chǔ)10.2基本動(dòng)畫(huà)10.3關(guān)鍵幀動(dòng)畫(huà)10.4路徑動(dòng)畫(huà)10.5用代碼實(shí)現(xiàn)變換10.6對(duì)繪圖結(jié)果進(jìn)行效果處理10.7音頻和視頻的播放310.1WPF動(dòng)畫(huà)基礎(chǔ)在WPF應(yīng)用程序中，所有可見(jiàn)對(duì)象都可以實(shí)現(xiàn)動(dòng)畫(huà)功能，具體的實(shí)現(xiàn)可以分為兩大類(lèi)動(dòng)畫(huà)技術(shù)。410.1WPF動(dòng)畫(huà)基礎(chǔ)除了逐幀動(dòng)畫(huà)以外，本地動(dòng)畫(huà)、時(shí)鐘動(dòng)畫(huà)以及演示圖板動(dòng)畫(huà)都是基于Timeline類(lèi)來(lái)實(shí)現(xiàn)的。Timeline類(lèi)是定義計(jì)時(shí)行為的抽象基類(lèi)。該抽象類(lèi)提供了控制動(dòng)畫(huà)播放的屬性，從該類(lèi)繼承的各種動(dòng)畫(huà)類(lèi)都可以使用這些屬性。Duration屬性RepeatBehavior屬性AutoReverse屬性BeginTime屬性FillBehavior屬性控制時(shí)間線速度的屬性（SpeedRatio、AccelerationRatio、DecelerationRatio屬性）5利用Duration屬性控制動(dòng)畫(huà)例10-1

(a)初始效果(b)動(dòng)畫(huà)播放期間的效果6利用RepeatBehavior屬性控制動(dòng)畫(huà)例10-2

7利用AutoReverse屬性控制動(dòng)畫(huà)例10-3

8利用SpeedRatio、AccelerationRatio、DecelerationRatio屬性控制動(dòng)畫(huà)例10-4

不同速度控制的運(yùn)行效果910.2基本動(dòng)畫(huà)基本動(dòng)畫(huà)類(lèi)型用本地動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)用Storyboard實(shí)現(xiàn)基本動(dòng)畫(huà)用時(shí)鐘動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)101.基本動(dòng)畫(huà)類(lèi)型WPF提供的基本動(dòng)畫(huà)可控制多種類(lèi)型，這些動(dòng)畫(huà)的命名約定為<類(lèi)型>Animation可用的<類(lèi)型>有：Byte、Int16、Int32、Int64、Single、Double、Decimal、Color、Point、Size、Thickness、Rect、Vector、Vector3D、Quaternion、Rotation3D。在這些動(dòng)畫(huà)類(lèi)型中，常用有DoubleAnimation、ColorAnimation和PointAnimation。11From/To/By動(dòng)畫(huà)的基本用法（假定基值為120）格

式舉

例說(shuō)

明From起始值

To結(jié)束值From50To200從起始值50逐漸變化到結(jié)束值200From起始值

By偏移量From50By150從起始值50逐漸變化到200（即50+150）From起始值From50從起始值50逐漸變化到基值120To結(jié)束值To150從基值120逐漸變化到結(jié)束值150By偏移量By50從基值120逐漸變化到170（即120+50）

122.用本地動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)本地動(dòng)畫(huà)是指直接對(duì)對(duì)象的屬性值進(jìn)行處理的動(dòng)畫(huà)，這種動(dòng)畫(huà)受計(jì)時(shí)系統(tǒng)支持，但不能對(duì)動(dòng)畫(huà)進(jìn)行暫停等交互操作。本地動(dòng)畫(huà)只能用C#代碼來(lái)實(shí)現(xiàn)，無(wú)法用XAML來(lái)描述。13用本地動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)示例10-5

用本地動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)運(yùn)行效果143.用Storyboard實(shí)現(xiàn)基本動(dòng)畫(huà)基本動(dòng)畫(huà)、關(guān)鍵幀動(dòng)畫(huà)、路徑動(dòng)畫(huà)都可以使用Storyboard來(lái)實(shí)現(xiàn)。用Storyboard實(shí)現(xiàn)動(dòng)畫(huà)時(shí)，既可以用C#代碼來(lái)編寫(xiě)，也可以用XAML來(lái)描述。15用Storyboard實(shí)現(xiàn)基本動(dòng)畫(huà)示例例10-6、10-7運(yùn)行效果164.用時(shí)鐘動(dòng)畫(huà)實(shí)現(xiàn)基本動(dòng)畫(huà)時(shí)鐘動(dòng)畫(huà)適用于處理大量類(lèi)型相同而且需要交互的場(chǎng)合。例10-8運(yùn)行效果1710.3關(guān)鍵幀動(dòng)畫(huà)關(guān)鍵幀動(dòng)畫(huà)類(lèi)型利用BlendforVS2012制作關(guān)鍵幀動(dòng)畫(huà)在關(guān)鍵幀動(dòng)畫(huà)中插入樣條動(dòng)畫(huà)在關(guān)鍵幀動(dòng)畫(huà)中插入緩動(dòng)函數(shù)1.關(guān)鍵幀動(dòng)畫(huà)類(lèi)型關(guān)鍵幀動(dòng)畫(huà)類(lèi)型是內(nèi)插關(guān)鍵幀的容器。關(guān)鍵幀動(dòng)畫(huà)類(lèi)型的命名約定為<類(lèi)型>AnimationUsingKeyFrames在每個(gè)關(guān)鍵幀動(dòng)畫(huà)類(lèi)型的開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間，都可以使用多種內(nèi)插關(guān)鍵幀類(lèi)型，每個(gè)內(nèi)插關(guān)鍵幀都由關(guān)鍵時(shí)間和關(guān)鍵值組成。18關(guān)鍵幀動(dòng)畫(huà)可控制的屬性類(lèi)型以及可用的內(nèi)插方法WPF可控制的屬性類(lèi)型Silverlight可控制的屬性類(lèi)型可用的內(nèi)插方法Boolean、Matrix、String、ObjectObject離散Byte、Color、Decimal、Double、Int16、Int32、Int64、Point、Rect、Quaternion、VectorRotation3D、Single、Size、Thickness、Vector3DColor、Double、Point離散、線性、樣條192.利用BlendforVS2012制作關(guān)鍵幀動(dòng)畫(huà)在Window7下制作關(guān)鍵幀動(dòng)畫(huà)或者路徑動(dòng)畫(huà)時(shí)，或者制作應(yīng)用程序原型時(shí)，一般借助Blend+SketchFlowforVS2012來(lái)實(shí)現(xiàn)，這樣能極大地提高項(xiàng)目開(kāi)發(fā)的效率。20BlendforVS2012的設(shè)計(jì)界面21使用BlendforVS2012制作關(guān)鍵幀動(dòng)畫(huà)的操作要點(diǎn)創(chuàng)建演示圖板后才能利用時(shí)間線添加關(guān)鍵幀。先選擇要對(duì)其進(jìn)行動(dòng)畫(huà)的對(duì)象，然后拖動(dòng)時(shí)間線到某個(gè)關(guān)鍵時(shí)間，再修改該關(guān)鍵時(shí)間的目標(biāo)屬性值。在事件觸發(fā)器中指定事件。223.在關(guān)鍵幀動(dòng)畫(huà)中插入樣條動(dòng)畫(huà)樣條動(dòng)畫(huà)使用三次貝塞爾曲線來(lái)實(shí)現(xiàn)，每條曲線段都由4個(gè)點(diǎn)來(lái)定義：起點(diǎn)、終點(diǎn)和中間的兩個(gè)控制點(diǎn)。23樣條動(dòng)畫(huà)示例例10-10244.在關(guān)鍵幀動(dòng)畫(huà)中插入緩動(dòng)函數(shù)在內(nèi)插關(guān)鍵幀中，還可以將特殊的數(shù)學(xué)公式f(t)應(yīng)用于動(dòng)畫(huà)，即隨著時(shí)間t的變化，將函數(shù)f(t)的值自動(dòng)插入到某個(gè)屬性值中，從而實(shí)現(xiàn)各種特殊的動(dòng)畫(huà)效果。這些實(shí)現(xiàn)特殊效果的數(shù)學(xué)公式稱(chēng)為緩動(dòng)函數(shù)。25常用的緩動(dòng)函數(shù)名稱(chēng)說(shuō)明BackEase在某一動(dòng)畫(huà)開(kāi)始沿指示的路徑進(jìn)行動(dòng)畫(huà)處理前稍稍收回該動(dòng)畫(huà)的移動(dòng)。其效果類(lèi)似跳遠(yuǎn)時(shí)先后退幾步再起跑BounceEase創(chuàng)建具有彈跳效果的動(dòng)畫(huà)。一般使用EaseOut模擬落地的反彈效果。Bounces屬性獲取或設(shè)置彈跳次數(shù)，Bounciness屬性獲取或設(shè)置下一次反彈的幅度。該值越小表示彈性越好，值越大表示彈性越差CircleEase使用循環(huán)函數(shù)加速和減速的動(dòng)畫(huà)ElasticEase類(lèi)似于彈簧在停止前來(lái)回振蕩的動(dòng)畫(huà)ExponentialEase使用指數(shù)公式加速和減速的動(dòng)畫(huà)PowerEase使用公式

f(t)=tp（其中，p等于Power屬性）加速和減速的動(dòng)畫(huà)SineEase使用正弦公式加速和減速的動(dòng)畫(huà)26緩動(dòng)函數(shù)動(dòng)畫(huà)示例例10-11272810.4路徑動(dòng)畫(huà)使用PathGeometry繪制路徑路徑動(dòng)畫(huà)類(lèi)型利用BlendforVS2012制作路徑動(dòng)畫(huà)1.使用PathGeometry繪制路徑例10-12路徑標(biāo)記語(yǔ)法示例292.路徑動(dòng)畫(huà)類(lèi)型WPF提供的路徑動(dòng)畫(huà)類(lèi)型有：PointAnimationUsingPathDoubleAnimationUsingPathMatrixAnimationUsingPath30路徑動(dòng)畫(huà)類(lèi)型示例例10-13PointAnimationUsingPath示例31路徑動(dòng)畫(huà)類(lèi)型示例例10-14DoubleAnimationUsingPath示例32路徑動(dòng)畫(huà)類(lèi)型示例例10-15MatrixAnimationUsingPath示例333.利用BlendforVS2012制作路徑動(dòng)畫(huà)在實(shí)際的項(xiàng)目開(kāi)發(fā)中，一般借助BlendforVS2012讓其自動(dòng)生成實(shí)現(xiàn)路徑動(dòng)畫(huà)的代碼。在BlendforVS2012中，開(kāi)發(fā)人員只需要通過(guò)鼠標(biāo)拖動(dòng)和簡(jiǎn)單操作，即可以讓其自動(dòng)生成對(duì)應(yīng)的路徑動(dòng)畫(huà)。34利用BlendforVS2012制作路徑動(dòng)畫(huà)步驟第1步：在Blend中繪制形狀和路徑第2步：在Blend中將形狀和文本轉(zhuǎn)換為路徑第3步：在Blend中合并和剪切路徑35利用BlendforVS2012制作路徑動(dòng)畫(huà)示例例10-16在Blend中用鉛筆繪制一條螺旋狀路徑，然后讓小球沿著該路徑移動(dòng)。363710.5用代碼實(shí)現(xiàn)變換二維變換基本概念對(duì)變換進(jìn)行動(dòng)畫(huà)處理1.二維變換基本概念用戶(hù)通過(guò)改變變換矩陣的值，可以旋轉(zhuǎn)、按比例縮放、扭曲和平移對(duì)象。用戶(hù)也可以通過(guò)WPF提供的許多用起來(lái)更容易的變換類(lèi)，可直接對(duì)元素進(jìn)行變換操作。38WPF的基本變換類(lèi)型類(lèi)

型變換屬性brushTransform，RelativeTransformContainerVisualTransformDrawingGroupTransformFrameworkElementRenderTransform，LayoutTransformGeometryTransformTextEffectTransformUIElementRenderTransform392.對(duì)變換進(jìn)行動(dòng)畫(huà)處理可以通過(guò)WPF控件的Effect屬性對(duì)各種變換（平移、旋轉(zhuǎn)、縮放、扭曲等）進(jìn)行動(dòng)畫(huà)處理。40對(duì)變換進(jìn)行動(dòng)畫(huà)處理示例例10-19對(duì)變換進(jìn)行動(dòng)畫(huà)處理示例414210.6對(duì)繪圖結(jié)果進(jìn)行效果處理模糊效果（BlurEffect）陰影效果（DropShadowEffect）文本效果（TextEffect）1.模糊效果（BlurEffect）利用繼承自Effect的BlurEffect類(lèi)，可以使目標(biāo)紋理具有模糊效果（模擬通過(guò)離焦透鏡查看對(duì)象的情形）。例10-2043用BlurEffect實(shí)現(xiàn)模糊效果2.陰影效果（DropShadowEffect）利用繼承自Effect的DropShadowEffect類(lèi)，可以在目標(biāo)紋理對(duì)象的周?chē)鷦?chuàng)建投影效果，比如柔和陰影、噪音、強(qiáng)烈投影以及外部發(fā)光效果等。例10-2144用DropShadowEffect實(shí)現(xiàn)陰影效果3.文本效果（TextEffect）對(duì)于模糊效果和陰影效果來(lái)說(shuō)，Effect用于將所有字符作為一個(gè)整體進(jìn)行處理，而利用TextEffect，則可以對(duì)文本中的每個(gè)字符進(jìn)行效果和變換處理。例10-2245用DropShadowEffect實(shí)現(xiàn)旋轉(zhuǎn)效果4610.7音頻和視頻的播放語(yǔ)音音頻和視頻（MediaElement）SoundPlayerAction類(lèi)1.語(yǔ)音Microsoft.NET框架在System.Speech.Synthesis.SpeechSynthesizer類(lèi)中提供了對(duì)已安裝的語(yǔ)音合成引擎功能的訪問(wèn)，在需要通過(guò)文字發(fā)音的項(xiàng)目需求中非常有用。47語(yǔ)音基本用法示例例10-23語(yǔ)音用法示例482.音頻和視頻（MediaElement）在WPF中，播放音頻或視頻最簡(jiǎn)單的方法就是用MediaElement控件來(lái)實(shí)現(xiàn)，該對(duì)象可播放多種類(lèi)型的音頻文件和視頻文件，而且還能控制媒體的播放、暫停、停止以及音量和播放速度等。若要在WPF中使用音頻或視頻，必須在計(jì)算機(jī)上安裝WindowsMediaPlayer10或更高版本。下面的XAML描述了