與 From/To/By 動畫類似,關鍵幀動畫以也可以以動畫形式顯示目標屬性值。 和From/To/By 動畫不同的是, From/To/By 動畫只能控制在兩個狀態之間變化,而關鍵幀動畫則可以在多個狀態之間變化,例如,對於前面那個改變按鈕寬度的例子,如果我們要實現如下效果:
-
在2秒時將寬度從 0變為350
-
在7秒時將寬度變為50
-
在9秒的時候將其寬度變為200
雖然我們可以用三個From/To/By 動畫組合實現類似效果,但是這樣一來麻煩,二來要感知動畫完成事件,不方便在XAML中使用。此時我們則可以使用關鍵幀動畫來快速實現這一過程。
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);
可以看出,關鍵幀動畫將每一個狀態制定為一個關鍵幀,關鍵幀動畫時間線自動連接各個關鍵幀,並計算過渡狀態,完成動畫。因此,某種程度上,我們也可以把From/To/By 動畫看成是只有兩個狀態的特殊關鍵幀動畫。
內置的關鍵幀動畫
與 From/To/By 動畫一樣,在名字空間System.Windows.Media.Animation 下也內置了大量關鍵幀動畫,它們的命名規則是:
<類型> AnimationUsingKeyFrames
例如這兒使用的DoubleAnimationUsingKeyFrames,其它類型請參看MSDN:關鍵幀動畫概述,這里就不列舉了。
插值算法
在關鍵幀動畫中,我們除了定義關鍵幀外,還需要定義兩個關鍵幀之間的插值算法,這樣系統才能根據關鍵幀和插值算法生成中間狀態。WPF系統內置四種插值算法:
-
線性: 兩個關鍵幀之間均勻變化
-
離散: 兩個關鍵幀之間突變(到達時間點的時候硬切換,沒有過渡效果)
-
樣條: 使用貝塞爾曲線實現更精確的加速和減速控制
-
緩動: 使用緩動函數曲線實現彈性變化
綜上來看,線性算法最常用,樣條算法能實現精准加速和減速控制。離散的這種硬切換的效果雖然看起來沒有什么動畫效果,但用於連接關鍵幀還是比較常用的。另外在一些硬過渡的地方也是能用到的,例如實現閃爍效果。
這幾種算法的具體效果這里就不做更多的介紹了,感興趣的朋友可以看看如下兩個鏈接中的描述和例子:
值得一提的是,並不是所有關鍵幀動畫都支持這幾種算法的,具體支持情況請參看MSDN:關鍵幀動畫概述。 當然,對於不支持的也是可以自己手動實現的。
關鍵幀(IKeyFrame)
前面已經介紹過,一個關鍵幀主要有時間點和插值算法兩部分組成,在WPF中,不同的關鍵幀動畫對應着同的關鍵幀對象,它們都繼承自IKeyFrame接口,其命名規則為:
<類型> KeyFrame
例如,DoubleAnimationUsingKeyFrames對應的是DoubleKeyFrame,但由於這個類並沒有制定插值算法,它只是一個抽象基類,再加上插值算法后對應的關鍵幀類命名規范為:
<插值算法><類型> KeyFrame
例如,DoubleKeyFrame對應的幾種插值算法的關鍵幀為:LinearDoubleKeyFrame、DiscreteDoubleKeyFrame、SplineDoubleKeyFrame、EasingDoubleKeyFrame。這些關鍵幀對象使用的方式都比較類似,這里就不多介紹了。
關鍵幀的時間點(KeyTime)
關鍵幀的時間點由IKeyFrame.KeyTime屬性指定。它是一個KeyTime類型,它有如下幾種取值類型:
-
時間點TimeSpan: 靠TimeSpan直接決定時間點,可以通過函數 KeyTime.FromTimeSpan() 創建,也可以直接用TimeSpan隱式轉換。
-
相對時間Percent: 指定的是百分比,通過時間線的Duration來聯合決定對應的時間點。通過函數 KeyTime.FromPercent() 創建。
-
特殊值Uniform: 時間線平均分布每個關鍵幀所需要的時間。通過函數 KeyTime.Uniform創建 。
-
特殊值Paced: 間線按固定的幀率分配所需時間,這種情況下,變化大的關鍵幀分配時間長,變化小的關鍵幀分配時間段。通過函數 KeyTime.Paced創建 。
用代碼創建的方式這兒就不舉例了,這里就僅僅列舉一下如何在XAML中表示這幾種時間:
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
參考資料: