WPF中的動畫——（五）關鍵幀動畫

與 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系統內置四種插值算法：

• 線性：    兩個關鍵幀之間均勻變化
• 離散：    兩個關鍵幀之間突變（到達時間點的時候硬切換，沒有過渡效果）
• 樣條：    使用貝塞爾曲線實現更精確的加速和減速控制
• 緩動：    使用緩動函數曲線實現彈性變化

綜上來看，線性算法最經常使用，樣條算法能實現精準加速和減速控制。離散的這種硬切換的效果雖然看起來沒有什麼動畫效果，但用於鏈接關鍵幀仍是比較經常使用的。另外在一些硬過渡的地方也是能用到的，例如實現閃爍效果。

這幾種算法的具體效果這裏就不作更多的介紹了，感興趣的朋友能夠看看以下兩個連接中的描述和例子：

• 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

值得一提的是，並非全部關鍵幀動畫都支持這幾種算法的，具體支持狀況請參看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" />

參考資料：

關鍵幀動畫概述