腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

WPF關(guān)鍵幀動畫介紹與實現(xiàn)

更新時間：2022年01月30日 10:54:15 作者：痕跡g

這篇文章介紹了WPF關(guān)鍵幀動畫與實現(xiàn)方式，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

動畫與關(guān)鍵幀的區(qū)別

普通動畫

WPF基礎(chǔ)動畫當(dāng)中, 我們熟悉的From/To/By驅(qū)動的動畫, 主要在兩個值之間創(chuàng)建過渡效果, 如下圖所示:

下面是使用普通的ThicknessAnimation創(chuàng)建的愛心跳動的動畫

關(guān)鍵幀

對于關(guān)鍵幀動畫而言,關(guān)鍵幀動畫沒有From/To/By的屬性, 而關(guān)鍵幀動畫的值則是使用幀對象來進(jìn)行描述, 故稱之為關(guān)鍵幀動畫, 如下所示:

下面是使用關(guān)鍵幀動畫創(chuàng)建的一個矩形位移的動畫

注：能夠注意到, 左下角, 描述了整個動畫的過程:
1.首先5秒內(nèi), 矩形從位置0 -> 500 : LinearDoubleKeyFrame Value="500" KeyTime="0:0:5"
2.從5-10秒內(nèi), 矩形位置500 -> 200 : SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="200" KeyTime="0:0:10"
3.從10-12秒內(nèi), 矩形位置200 -> 290 : LinearDoubleKeyFrame Value="290" KeyTime="0:0:12"
4.從12-13.5秒內(nèi), 矩形位置290 -> 300 : LinearDoubleKeyFrame Value="300" KeyTime="0:0:13.5"
5.從13.5-15秒內(nèi), 矩形位置300 -> 0 : SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="0" KeyTime="0:0:15"
注: 關(guān)鍵幀對象(Frame) 主要包含兩個參數(shù), Value是目標(biāo)值， KeyTime 則表達(dá)的是時間

到目前為止, 我們應(yīng)該可以理解普通動畫與關(guān)鍵幀動畫的區(qū)別, 對于幀動畫而言, 在于控制每一個幀的表現(xiàn)形式, 這一點并不像普通動畫中, 對于整個動畫的控制我們只能從開始到結(jié)束, 而幀動畫可以控制開始到結(jié)束的整個過程。

介紹關(guān)鍵幀動畫

下面,介紹了如何創(chuàng)建一個簡單的關(guān)鍵幀動畫。

1.如下代碼,創(chuàng)建了一個矩形, 為其添加了一個點擊時間觸發(fā)動畫, 該動畫在Storyboard中定義并且觸發(fā):

<Border Width="400" BorderBrush="Black">  
    <Rectangle Fill="Blue" 
      Width="50" Height="50"
      HorizontalAlignment="Left">
      <Rectangle.RenderTransform>
        <TranslateTransform 
          x:Name="MyAnimatedTranslateTransform" 
          X="0" Y="0" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
                <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />                          
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers> 
    </Rectangle>
  </Border>

說明:以上的創(chuàng)建了一個DoubleAnimation類型的幀動畫, 為其綁定了一個目標(biāo)及目標(biāo)的動畫依賴屬性 "Y", Duration則為其設(shè)定了一個幀動畫持續(xù)時間,在關(guān)鍵幀動畫的集合中, 定義了多個線性關(guān)鍵幀(LinearDoubleKeyFrame), 為其設(shè)定了Value目標(biāo)值和KeyTime持續(xù)時間。

此處說講到的線性關(guān)鍵幀所屬其中的一種類型, 在后面將會有更多的介紹。

關(guān)鍵幀動畫類型

關(guān)鍵幀動畫屬于System.Windows.Media.Animation命令空間下, 命名規(guī)則約定為
AnimationUsingKeyFrames
Type: 為動畫的值類型, 例如上面的動畫當(dāng)中, 需要給舉行的X軸移動位置, X的值屬于雙精度類型, 所以定義的類型為 :DoubleAnimationUsingKeyFrames 。

關(guān)鍵幀的動畫類型列表

幀對象的類型

正如我們創(chuàng)建不同類型的動畫, 我們需要按照約定命名方式定義, 如: DoubleAnimation, ColorAnimation 等等。
對于幀動畫而言, 主要由一個或者N個幀對象組成(Frame), 幀對象同時也擁有不同的種類, 故幀對象遵循一下的命名約定:
<插值方法><類型>
插值方法: 是幀對象使用的插值方法, 如: 離散(Discrete)、線性(Linear) 、樣條(Spline) 等。
類型: 是動畫的值類型, 例如Double、Decimal等。
KeyFrame: 固定的幀對象語法結(jié)束

關(guān)鍵幀的主要目的是指定和KeyTime、Value 每個關(guān)鍵幀類型都可提供這兩種屬性。

屬性Value指定該關(guān)鍵幀的目標(biāo)值。
該KeyTime屬性指定何時（在動畫的Duration）中到達(dá)關(guān)鍵幀。 Value
當(dāng)關(guān)鍵幀動畫開始時，按其KeyTime屬性定義的順序遍接其關(guān)鍵幀。
如果時間 0 時沒有關(guān)鍵幀，動畫會在目標(biāo)屬性的當(dāng)前值和第Value一個關(guān)鍵幀之間的轉(zhuǎn)換;否則，動畫的輸出值將成為第一個關(guān)鍵幀的值。
動畫使用第二個關(guān)鍵幀指定的Value插值方法在第一個關(guān)鍵幀和第二個關(guān)鍵幀之間創(chuàng)建過渡。轉(zhuǎn)換從第一個關(guān)鍵幀開始KeyTime，并在到達(dá)第二個關(guān)鍵幀KeyTime時結(jié)束。
動畫將繼續(xù)，這會創(chuàng)建每個后續(xù)關(guān)鍵幀和其前面的關(guān)鍵幀之間的過渡。
最后，動畫轉(zhuǎn)換為關(guān)鍵幀的值，其最大鍵時間等于或小于動畫的值Duration。
如果動畫的Duration或Automatic其Duration等于最后一個關(guān)鍵幀的時間，則動畫結(jié)束。否則，如果動畫大于Duration最后一個關(guān)鍵幀的鍵時間，則動畫將保留關(guān)鍵幀值，直到到達(dá)其Duration的末尾。與所有動畫一樣，關(guān)鍵幀動畫使用其FillBehavior屬性來確定在到達(dá)活動周期結(jié)束時是否保留最終值。

插值方法

下面將主要介紹有三種不同類型的內(nèi)插方法: 線性、離散和曲線。

線性內(nèi)插

使用線性內(nèi)插，動畫將以段持續(xù)時間的固定速度進(jìn)行播放。例如，如果關(guān)鍵幀段從 0 過渡到 10，持續(xù)時間為 5 秒，則動畫會在指定時間輸出以下值：

離散內(nèi)插

使用離散內(nèi)插，動畫函數(shù)將從一個值跳到下一個值，沒有內(nèi)插。如果關(guān)鍵幀段從 0 過渡到 10，持續(xù)時間為 5 秒，則動畫會在指定時間輸出以下值：

注: 通過觀察線性和離散的插入比較, 可以清晰的看出來, 離線類型的插入方式, 在動畫的執(zhí)行過程中, 我們無法在規(guī)定的時間內(nèi)觀察其變化效果, 直接至?xí)r間結(jié)束后, 到指定的目標(biāo)值。

曲線內(nèi)插

曲線內(nèi)插可能很難理解；使用不同的設(shè)置進(jìn)行體驗有助于理解。通過主曲線動畫示例，可以更改主曲線值，并查看由此所產(chǎn)生的動畫結(jié)果, 可以查看最上方視頻進(jìn)行理解。

組合內(nèi)插

可在一個關(guān)鍵幀動畫中使用具有不同內(nèi)插類型的關(guān)鍵幀。如果兩個具有不同內(nèi)插的關(guān)鍵幀動畫彼此跟隨，第二個關(guān)鍵幀的內(nèi)插方法將用于創(chuàng)建從第一個值到第二個值的過渡。
下面的示例,演示了一個使用DoubleAnimationUsingKeyFrames創(chuàng)建使用線性、拼接和離散插值的示例:

      <Rectangle 
  Width="50"
  Height="50"
  Fill="Orange">  
  <Rectangle.RenderTransform>
    <TranslateTransform 
      x:Name="ComboAnimatedTranslateTransform" 
      X="0" Y="0" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="ComboAnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            Duration="0:0:15"
            RepeatBehavior="Forever">
            <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
            <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  
              KeySpline="0.25,0.5 0.75,1" />                      
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers> 
</Rectangle>

Duration與KeyTime

與其他動畫一樣，關(guān)鍵幀動畫具有屬性Duration。除了指定動畫的Duration外，還需要指定每個關(guān)鍵幀的持續(xù)時間的哪一部分。為此，您可以為每個動畫的關(guān)鍵KeyTime幀描述。每個關(guān)鍵幀指定KeyTime該關(guān)鍵幀的結(jié)束時間。
屬性KeyTime不指定密鑰時間播放的時間。關(guān)鍵幀的播放時長由關(guān)鍵幀的結(jié)束時間、前一個關(guān)鍵幀的結(jié)束時間以及動畫的持續(xù)時間確定。關(guān)鍵時間可以指定為時間值、百分比或特殊值Uniform或Paced。

TimeSpan

以下示例演示一個持續(xù)時間為 10 秒鐘、有四個關(guān)鍵幀（這些關(guān)鍵幀的關(guān)鍵時間指定為時間值）的動畫。

在前 3 秒鐘內(nèi)，第一個關(guān)鍵幀在基值和 100 之間進(jìn)行動畫處理，結(jié)束時間 = 0:0:03。
第二個關(guān)鍵幀在 100 和 200 之間進(jìn)行動畫處理。它在第一個關(guān)鍵幀結(jié)束后開始（開始時間 = 3 秒），播放 5 秒鐘，結(jié)束時間 = 0:0:8。
第三個關(guān)鍵幀在 200 和 500 之間進(jìn)行動畫處理。它在第二個關(guān)鍵幀結(jié)束時開始（開始時間 = 8 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:9。
第四個關(guān)鍵幀在 500 和 600 之間進(jìn)行動畫處理。它在第三個關(guān)鍵幀結(jié)束時開始（開始時間 = 9 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:10。

      <Rectangle Width="50" Height="50" Fill="Blue">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform01" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
            <LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

百分比

百分比值指定關(guān)鍵幀以動畫的某些Duration百分比結(jié)束。在 XAML 中，指定百分比作為 % 符號后的數(shù)字。在代碼中，使用FromPercent方法并傳遞一個Double指示百分比的方法。該值必須大于或等于 0 并且小于或等于 100%。以下示例演示一個持續(xù)時間為 10 秒鐘、有四個關(guān)鍵幀（這些關(guān)鍵幀的關(guān)鍵時間指定為百分比）的動畫。

在前 3 秒鐘內(nèi)，第一個關(guān)鍵幀將在基值和 100 之間進(jìn)行動畫處理，結(jié)束時間 = 0:0:3。
第二個關(guān)鍵幀在 100 和 200 之間進(jìn)行動畫處理。它在第一個關(guān)鍵幀結(jié)束后開始（開始時間 = 3 秒），播放 5 秒鐘，結(jié)束時間 = 0:0:8 (0.8 * 10 = 8)。
第三個關(guān)鍵幀在 200 和 500 之間進(jìn)行動畫處理。它在第二個關(guān)鍵幀結(jié)束時開始（開始時間 = 8 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:9 (0.9 * 10 = 9)。
第四個關(guān)鍵幀在 500 和 600 之間進(jìn)行動畫處理。它在第三個關(guān)鍵幀結(jié)束時開始（開始時間 = 9 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:10 (1 * 10 = 10)。

      <Rectangle Height="50" Width="50" Fill="Purple">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform02" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="200" KeyTime="80%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="90%" />
            <LinearDoubleKeyFrame Value="600" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Uniform

當(dāng)您Uniform希望每個關(guān)鍵幀花費相同的時間時，請使用計時。
Uniform關(guān)鍵時間將可用時間平均除以關(guān)鍵幀數(shù)，以確定每個關(guān)鍵幀的結(jié)束時間。下面的示例顯示持續(xù)時間為 10 秒的動畫和四個關(guān)鍵幀，其關(guān)鍵時間指定為Uniform。

在前 2.5 秒鐘內(nèi)，第一個關(guān)鍵幀在基值和 100 之間進(jìn)行動畫處理，結(jié)束時間 = 0:0:2.5。
第二個關(guān)鍵幀在 100 和 200 之間進(jìn)行動畫處理。它在第一個關(guān)鍵幀結(jié)束后開始（開始時間 = 2.5 秒），播放大約 2.5 秒鐘，結(jié)束時間 = 0:0:5。
第三個關(guān)鍵幀在 200 和 500 之間進(jìn)行動畫處理。它在第二個關(guān)鍵幀結(jié)束時開始（開始時間 = 5 秒），播放 2.5 秒鐘，結(jié)束時間 = 0:0:7.5。
第四個關(guān)鍵幀在 500 和 600 之間進(jìn)行動畫處理。它在第二個關(guān)鍵幀結(jié)束時開始（開始時間 = 7.5 秒），播放 2.5 秒鐘，結(jié)束時間 = 0:0:1。

      <Rectangle Height="50" Width="50" Fill="Red">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform03" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Uniform. 
                 When a key time is set to "Uniform" the total allotted 
                 time of the animation is divided evenly between key frames.  
                 In this example, the total duration of the animation is 
                 ten seconds and there are four key frames each of which 
                 are set to "Uniform", therefore, the duration of each key frame 
                 is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Paced

如果要Paced以恒定速率進(jìn)行動畫處理，請使用計時。
Paced關(guān)鍵時間根據(jù)每個關(guān)鍵幀的長度分配可用時間，以確定每個幀的持續(xù)時間。這樣，動畫的速度或速率將保持不變。下面的示例顯示持續(xù)時間為 10 秒的動畫和三個關(guān)鍵幀，其關(guān)鍵時間指定為Paced。

      <Rectangle Height="50" Width="50" Fill="Orange">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform04" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Paced. 
                 Paced values are used when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" 
                 is determined by the time allocated to the other key 
                 frames of the animation. This time is calculated to 
                 attempt to give a "paced" or "constant velocity" 
                 for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

關(guān)鍵幀時間及順序

可以在同一動畫中使用具有不同KeyTime值類型的關(guān)鍵幀。盡管建議以關(guān)鍵幀的實際播放順序來添加關(guān)鍵幀，但此操作不是必需的。動畫和計時系統(tǒng)能夠處理順序紊亂的關(guān)鍵幀。將忽略關(guān)鍵時間無效的關(guān)鍵幀。
下表描述了為關(guān)鍵幀動畫的關(guān)鍵幀解析關(guān)鍵時間的過程。

1 解析TimeSpanKeyTime值。
2 確定動畫的總內(nèi)插時間，即關(guān)鍵幀動畫完成向前迭代所需的全部時間。
如果動畫的Duration不是Automatic或Forever，則總插值時間是動畫Duration屬性的值。
否則，總插值時間是其關(guān)鍵幀（TimeSpanKeyTime如果有）之間指定的最大值。
否則，總內(nèi)插時間為 1 秒。
3 使用總插值時間值解析PercentKeyTime值。
4 如果最后一個關(guān)鍵幀尚未在之前步驟中解析，則將解析該關(guān)鍵幀。如果最后KeyTime一個關(guān)鍵幀為Uniform或Paced，則其解析時間將等于總插值時間。
如果第KeyTime一個關(guān)鍵幀的，Paced并且此動畫比關(guān)鍵幀多，則將其KeyTime值解析為零;如果只有一個關(guān)鍵幀，并且其KeyTime值為Paced，則解析為總插值時間，如上一步所述。
5 解析剩余UniformKeyTime值：每個值都給定可用時間的相等份額。在此過程中PacedKeyTime，未解析的值將暫時視為UniformKeyTime值，并獲得臨時解析的時間。
6 使用聲明KeyTime的最接近具有已解析KeyTime值的關(guān)鍵幀，解決未指定密鑰時間的關(guān)鍵幀的值。
7 解析剩余PacedKeyTime值。 PacedKeyTime使用相鄰KeyTime關(guān)鍵幀的值來確定其解析時間。目的是確保動畫速度在此關(guān)鍵幀的解析時間內(nèi)保持固定不變。
8 按解析時間（主鍵）和聲明順序（輔助鍵）對關(guān)鍵幀進(jìn)行排序，即根據(jù)已解決的關(guān)鍵幀KeyTime值使用穩(wěn)定排序。

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

您可能感興趣的文章: