WPF動(dòng)畫(huà)效果系列

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（一）之基本概念

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（二）之From/To/By 動(dòng)畫(huà)

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（三）之時(shí)間線（TimeLine）

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（四）之緩動(dòng)函數(shù)

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（五）之關(guān)鍵幀動(dòng)畫(huà)

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（六）之路徑動(dòng)畫(huà)

WPF實(shí)現(xiàn)動(dòng)畫(huà)效果（七）之演示圖板

正文

與 From/To/By 動(dòng)畫(huà)類(lèi)似，關(guān)鍵幀動(dòng)畫(huà)以也可以以動(dòng)畫(huà)形式顯示目標(biāo)屬性值。 和From/To/By 動(dòng)畫(huà)不同的是， From/To/By 動(dòng)畫(huà)只能控制在兩個(gè)狀態(tài)之間變化，而關(guān)鍵幀動(dòng)畫(huà)則可以在多個(gè)狀態(tài)之間變化，例如，對(duì)于前面那個(gè)改變按鈕寬度的例子，如果我們要實(shí)現(xiàn)如下效果：

• 在2秒時(shí)將寬度從 0變?yōu)?50

• 在7秒時(shí)將寬度變?yōu)?0

• 在9秒的時(shí)候?qū)⑵鋵挾茸優(yōu)?00

雖然我們可以用三個(gè)From/To/By 動(dòng)畫(huà)組合實(shí)現(xiàn)類(lèi)似效果，但是這樣一來(lái)麻煩，二來(lái)要感知?jiǎng)赢?huà)完成事件，不方便在XAML中使用。此時(shí)我們則可以使用關(guān)鍵幀動(dòng)畫(huà)來(lái)快速實(shí)現(xiàn)這一過(guò)程。

    var widthAnimation = new DoubleAnimationUsingKeyFrames();
    var keyFrames = widthAnimation.KeyFrames;

    keyFrames.Add(new LinearDoubleKeyFrame(0, TimeSpan.FromSeconds(0)));
    keyFrames.Add(new LinearDoubleKeyFrame(350, TimeSpan.FromSeconds(2)));
    keyFrames.Add(new LinearDoubleKeyFrame(50, TimeSpan.FromSeconds(7)));
    keyFrames.Add(new LinearDoubleKeyFrame(200, TimeSpan.FromSeconds(9)));

    button.BeginAnimation(WidthProperty, widthAnimation);

可以看出，關(guān)鍵幀動(dòng)畫(huà)將每一個(gè)狀態(tài)制定為一個(gè)關(guān)鍵幀，關(guān)鍵幀動(dòng)畫(huà)時(shí)間線自動(dòng)連接各個(gè)關(guān)鍵幀，并計(jì)算過(guò)渡狀態(tài)，完成動(dòng)畫(huà)。因此，某種程度上，我們也可以把From/To/By 動(dòng)畫(huà)看成是只有兩個(gè)狀態(tài)的特殊關(guān)鍵幀動(dòng)畫(huà)。

內(nèi)置的關(guān)鍵幀動(dòng)畫(huà)

與 From/To/By 動(dòng)畫(huà)一樣，在名字空間System.Windows.Media.Animation 下也內(nèi)置了大量關(guān)鍵幀動(dòng)畫(huà)，它們的命名規(guī)則是：    

<類(lèi)型> AnimationUsingKeyFrames

例如這兒使用的DoubleAnimationUsingKeyFrames，其它類(lèi)型請(qǐng)參看MSDN：關(guān)鍵幀動(dòng)畫(huà)概述，這里就不列舉了。

插值算法

在關(guān)鍵幀動(dòng)畫(huà)中，我們除了定義關(guān)鍵幀外，還需要定義兩個(gè)關(guān)鍵幀之間的插值算法，這樣系統(tǒng)才能根據(jù)關(guān)鍵幀和插值算法生成中間狀態(tài)。WPF系統(tǒng)內(nèi)置四種插值算法：

• 線性：兩個(gè)關(guān)鍵幀之間均勻變化

• 離散：兩個(gè)關(guān)鍵幀之間突變（到達(dá)時(shí)間點(diǎn)的時(shí)候硬切換，沒(méi)有過(guò)渡效果）

• 樣條：使用貝塞爾曲線實(shí)現(xiàn)更精確的加速和減速控制

• 緩動(dòng)：使用緩動(dòng)函數(shù)曲線實(shí)現(xiàn)彈性變化

綜上來(lái)看，線性算法最常用，樣條算法能實(shí)現(xiàn)精準(zhǔn)加速和減速控制。離散的這種硬切換的效果雖然看起來(lái)沒(méi)有什么動(dòng)畫(huà)效果，但用于連接關(guān)鍵幀還是比較常用的。另外在一些硬過(guò)渡的地方也是能用到的，例如實(shí)現(xiàn)閃爍效果。

這幾種算法的具體效果這里就不做更多的介紹了，感興趣的朋友可以看看如下兩個(gè)鏈接中的描述和例子：

• http://msdn.microsoft.com/zh-cn/library/ms742524(v=vs.110).aspx

• http://msdn.microsoft.com/zh-cn/library/System.Windows.Media.Animation.LinearDoubleKeyFrame(v=vs.110).aspx

值得一提的是，并不是所有關(guān)鍵幀動(dòng)畫(huà)都支持這幾種算法的，具體支持情況請(qǐng)參看MSDN：關(guān)鍵幀動(dòng)畫(huà)概述。 當(dāng)然，對(duì)于不支持的也是可以自己手動(dòng)實(shí)現(xiàn)的。

關(guān)鍵幀（IKeyFrame）

前面已經(jīng)介紹過(guò)，一個(gè)關(guān)鍵幀主要有時(shí)間點(diǎn)和插值算法兩部分組成，在WPF中，不同的關(guān)鍵幀動(dòng)畫(huà)對(duì)應(yīng)著同的關(guān)鍵幀對(duì)象，它們都繼承自IKeyFrame接口，其命名規(guī)則為：

<類(lèi)型> KeyFrame

例如，DoubleAnimationUsingKeyFrames對(duì)應(yīng)的是DoubleKeyFrame，但由于這個(gè)類(lèi)并沒(méi)有制定插值算法，它只是一個(gè)抽象基類(lèi)，再加上插值算法后對(duì)應(yīng)的關(guān)鍵幀類(lèi)命名規(guī)范為：

<插值算法><類(lèi)型> KeyFrame

例如，DoubleKeyFrame對(duì)應(yīng)的幾種插值算法的關(guān)鍵幀為：LinearDoubleKeyFrame、DiscreteDoubleKeyFrame、SplineDoubleKeyFrame、EasingDoubleKeyFrame。這些關(guān)鍵幀對(duì)象使用的方式都比較類(lèi)似，這里就不多介紹了。

關(guān)鍵幀的時(shí)間點(diǎn)（KeyTime）

關(guān)鍵幀的時(shí)間點(diǎn)由IKeyFrame.KeyTime屬性指定。它是一個(gè)KeyTime類(lèi)型，它有如下幾種取值類(lèi)型：

• 時(shí)間點(diǎn)TimeSpan：靠TimeSpan直接決定時(shí)間點(diǎn)，可以通過(guò)函數(shù)KeyTime.FromTimeSpan()創(chuàng)建，也可以直接用TimeSpan隱式轉(zhuǎn)換。

• 相對(duì)時(shí)間Percent：指定的是百分比，通過(guò)時(shí)間線的Duration來(lái)聯(lián)合決定對(duì)應(yīng)的時(shí)間點(diǎn)。通過(guò)函數(shù)KeyTime.FromPercent()創(chuàng)建。

• 特殊值Uniform：時(shí)間線平均分布每個(gè)關(guān)鍵幀所需要的時(shí)間。通過(guò)函數(shù)KeyTime.Uniform創(chuàng)建。

• 特殊值Paced：間線按固定的幀率分配所需時(shí)間，這種情況下，變化大的關(guān)鍵幀分配時(shí)間長(zhǎng)，變化小的關(guān)鍵幀分配時(shí)間段。通過(guò)函數(shù)KeyTime.Paced創(chuàng)建。

用代碼創(chuàng)建的方式這兒就不舉例了，這里就僅僅列舉一下如何在XAML中表示這幾種時(shí)間：

    <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
    <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
    <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
    <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />

參考資料：

關(guān)鍵幀動(dòng)畫(huà)概述

到此這篇關(guān)于WPF實(shí)現(xiàn)動(dòng)畫(huà)效果之關(guān)鍵幀動(dòng)畫(huà)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論