WPF關鍵幀動畫介紹與實現(xiàn)
本章介紹關鍵幀動畫之前, 首先需要講解一下關于WPF當中基礎動畫與本章所講的關鍵幀動畫的區(qū)別。
動畫與關鍵幀的區(qū)別
普通動畫
WPF基礎動畫當中, 我們熟悉的From/To/By驅(qū)動的動畫, 主要在兩個值之間創(chuàng)建過渡效果, 如下圖所示:
下面是使用普通的ThicknessAnimation創(chuàng)建的愛心跳動的動畫
關鍵幀
對于關鍵幀動畫而言,關鍵幀動畫沒有From/To/By的屬性, 而關鍵幀動畫的值則是使用幀對象來進行描述, 故稱之為關鍵幀動畫, 如下所示:
下面是使用關鍵幀動畫創(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"
注: 關鍵幀對象(Frame) 主要包含兩個參數(shù), Value是目標值， KeyTime 則表達的是時間
到目前為止, 我們應該可以理解普通動畫與關鍵幀動畫的區(qū)別, 對于幀動畫而言, 在于控制每一個幀的表現(xiàn)形式, 這一點并不像普通動畫中, 對于整個動畫的控制我們只能從開始到結(jié)束, 而幀動畫可以控制開始到結(jié)束的整個過程。
介紹關鍵幀動畫
下面,介紹了如何創(chuàng)建一個簡單的關鍵幀動畫。
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類型的幀動畫, 為其綁定了一個目標及目標的動畫依賴屬性 "Y", Duration則為其設定了一個幀動畫持續(xù)時間,在關鍵幀動畫的集合中, 定義了多個線性關鍵幀(LinearDoubleKeyFrame), 為其設定了Value目標值和KeyTime持續(xù)時間。
此處說講到的線性關鍵幀所屬其中的一種類型, 在后面將會有更多的介紹。
關鍵幀動畫類型
關鍵幀動畫屬于System.Windows.Media.Animation命令空間下, 命名規(guī)則約定為
AnimationUsingKeyFrames
Type: 為動畫的值類型, 例如上面的動畫當中, 需要給舉行的X軸移動位置, X的值屬于雙精度類型, 所以定義的類型為 :DoubleAnimationUsingKeyFrames 。
關鍵幀的動畫類型列表
幀對象的類型
正如我們創(chuàng)建不同類型的動畫, 我們需要按照約定命名方式定義, 如: DoubleAnimation, ColorAnimation 等等。
對于幀動畫而言, 主要由一個或者N個幀對象組成(Frame), 幀對象同時也擁有不同的種類, 故幀對象遵循一下的命名約定:
<插值方法><類型>
插值方法: 是幀對象使用的插值方法, 如: 離散(Discrete)、線性(Linear) 、樣條(Spline) 等。
類型: 是動畫的值類型, 例如Double、Decimal等。
KeyFrame: 固定的幀對象語法結(jié)束
關鍵幀的主要目的是指定 和KeyTime、Value 每個關鍵幀類型都可提供這兩種屬性。
- 屬性Value指定該關鍵幀的目標值。
- 該KeyTime屬性指定何時（在動畫的Duration）中到達關鍵幀。 Value
當關鍵幀動畫開始時，按其KeyTime屬性定義的順序遍接其關鍵幀。 - 如果時間 0 時沒有關鍵幀，動畫會在目標屬性的當前值和第Value一個關鍵幀之間的轉(zhuǎn)換;否則，動畫的輸出值將成為第一個關鍵幀的值。
- 動畫使用第二個關鍵幀指定的Value插值方法在第一個關鍵幀和第二個關鍵幀之間創(chuàng)建過渡。 轉(zhuǎn)換從第一個關鍵幀開始KeyTime，并在到達第二個關鍵幀KeyTime時結(jié)束。
- 動畫將繼續(xù)，這會創(chuàng)建每個后續(xù)關鍵幀和其前面的關鍵幀之間的過渡。
- 最后，動畫轉(zhuǎn)換為關鍵幀的值，其最大鍵時間等于或小于動畫的值Duration。
如果動畫的Duration或Automatic其Duration等于最后一個關鍵幀的時間，則動畫結(jié)束。 否則，如果動畫大于Duration最后一個關鍵幀的鍵時間，則動畫將保留關鍵幀值，直到到達其Duration的末尾。 與所有動畫一樣，關鍵幀動畫使用其FillBehavior屬性來確定在到達活動周期結(jié)束時是否保留最終值。
插值方法
下面將主要介紹有三種不同類型的內(nèi)插方法: 線性、離散和曲線。
線性內(nèi)插
使用線性內(nèi)插，動畫將以段持續(xù)時間的固定速度進行播放。 例如，如果關鍵幀段從 0 過渡到 10，持續(xù)時間為 5 秒，則動畫會在指定時間輸出以下值：
離散內(nèi)插
使用離散內(nèi)插，動畫函數(shù)將從一個值跳到下一個值，沒有內(nèi)插。 如果關鍵幀段從 0 過渡到 10，持續(xù)時間為 5 秒，則動畫會在指定時間輸出以下值：
注: 通過觀察線性和離散的插入比較, 可以清晰的看出來, 離線類型的插入方式, 在動畫的執(zhí)行過程中, 我們無法在規(guī)定的時間內(nèi)觀察其變化效果, 直接至時間結(jié)束后, 到指定的目標值。
曲線內(nèi)插
曲線內(nèi)插可能很難理解；使用不同的設置進行體驗有助于理解。 通過主曲線動畫示例，可以更改主曲線值，并查看由此所產(chǎn)生的動畫結(jié)果, 可以查看最上方視頻進行理解。
組合內(nèi)插
可在一個關鍵幀動畫中使用具有不同內(nèi)插類型的關鍵幀。 如果兩個具有不同內(nèi)插的關鍵幀動畫彼此跟隨，第二個關鍵幀的內(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
與其他動畫一樣，關鍵幀動畫具有屬性Duration。 除了指定動畫的Duration外，還需要指定每個關鍵幀的持續(xù)時間的哪一部分。 為此，您可以為每個動畫的關鍵KeyTime幀描述 。 每個關鍵幀指定KeyTime該關鍵幀的結(jié)束時間。
屬性KeyTime不指定密鑰時間播放的時間。 關鍵幀的播放時長由關鍵幀的結(jié)束時間、前一個關鍵幀的結(jié)束時間以及動畫的持續(xù)時間確定。 關鍵時間可以指定為時間值、百分比或特殊值Uniform或Paced。
TimeSpan
以下示例演示一個持續(xù)時間為 10 秒鐘、有四個關鍵幀（這些關鍵幀的關鍵時間指定為時間值）的動畫。
- 在前 3 秒鐘內(nèi)，第一個關鍵幀在基值和 100 之間進行動畫處理，結(jié)束時間 = 0:0:03。
- 第二個關鍵幀在 100 和 200 之間進行動畫處理。 它在第一個關鍵幀結(jié)束后開始（開始時間 = 3 秒），播放 5 秒鐘，結(jié)束時間 = 0:0:8。
- 第三個關鍵幀在 200 和 500 之間進行動畫處理。 它在第二個關鍵幀結(jié)束時開始（開始時間 = 8 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:9。
- 第四個關鍵幀在 500 和 600 之間進行動畫處理。 它在第三個關鍵幀結(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>
百分比
百分比值指定關鍵幀以動畫的某些Duration百分比結(jié)束。 在 XAML 中，指定百分比作為 % 符號后的數(shù)字。 在代碼中，使用FromPercent方法并傳遞一個Double指示百分比的方法。 該值必須大于或等于 0 并且小于或等于 100%。 以下示例演示一個持續(xù)時間為 10 秒鐘、有四個關鍵幀（這些關鍵幀的關鍵時間指定為百分比）的動畫。
- 在前 3 秒鐘內(nèi)，第一個關鍵幀將在基值和 100 之間進行動畫處理，結(jié)束時間 = 0:0:3。
- 第二個關鍵幀在 100 和 200 之間進行動畫處理。 它在第一個關鍵幀結(jié)束后開始（開始時間 = 3 秒），播放 5 秒鐘，結(jié)束時間 = 0:0:8 (0.8 * 10 = 8)。
- 第三個關鍵幀在 200 和 500 之間進行動畫處理。 它在第二個關鍵幀結(jié)束時開始（開始時間 = 8 秒），播放 1 秒鐘，結(jié)束時間 = 0:0:9 (0.9 * 10 = 9)。
- 第四個關鍵幀在 500 和 600 之間進行動畫處理。 它在第三個關鍵幀結(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
當您Uniform希望每個關鍵幀花費相同的時間時，請使用計時。
Uniform關鍵時間將可用時間平均除以關鍵幀數(shù)，以確定每個關鍵幀的結(jié)束時間。 下面的示例顯示持續(xù)時間為 10 秒的動畫和四個關鍵幀，其關鍵時間指定為Uniform。
- 在前 2.5 秒鐘內(nèi)，第一個關鍵幀在基值和 100 之間進行動畫處理，結(jié)束時間 = 0:0:2.5。
- 第二個關鍵幀在 100 和 200 之間進行動畫處理。 它在第一個關鍵幀結(jié)束后開始（開始時間 = 2.5 秒），播放大約 2.5 秒鐘，結(jié)束時間 = 0:0:5。
- 第三個關鍵幀在 200 和 500 之間進行動畫處理。 它在第二個關鍵幀結(jié)束時開始（開始時間 = 5 秒），播放 2.5 秒鐘，結(jié)束時間 = 0:0:7.5。
- 第四個關鍵幀在 500 和 600 之間進行動畫處理。 它在第二個關鍵幀結(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以恒定速率進行動畫處理，請使用計時。
Paced關鍵時間根據(jù)每個關鍵幀的長度分配可用時間，以確定每個幀的持續(xù)時間。 這樣，動畫的速度或速率將保持不變。 下面的示例顯示持續(xù)時間為 10 秒的動畫和三個關鍵幀，其關鍵時間指定為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>
關鍵幀時間及順序
可以在同一動畫中使用具有不同KeyTime值類型的關鍵幀。 盡管建議以關鍵幀的實際播放順序來添加關鍵幀，但此操作不是必需的。 動畫和計時系統(tǒng)能夠處理順序紊亂的關鍵幀。 將忽略關鍵時間無效的關鍵幀。
下表描述了為關鍵幀動畫的關鍵幀解析關鍵時間的過程。
- 1 解析TimeSpanKeyTime值。
- 2 確定動畫的總內(nèi)插時間，即關鍵幀動畫完成向前迭代所需的全部時間。
如果動畫的Duration不是Automatic或Forever，則總插值時間是動畫Duration屬性的值。
否則，總插值時間是其關鍵幀（TimeSpanKeyTime如果有）之間指定的最大值。
否則，總內(nèi)插時間為 1 秒。 - 3 使用總插值時間值解析PercentKeyTime值。
- 4 如果最后一個關鍵幀尚未在之前步驟中解析，則將解析該關鍵幀。 如果最后KeyTime一個關鍵幀為Uniform或Paced，則其解析時間將等于總插值時間。
如果第KeyTime一個關鍵幀的，Paced并且此動畫比關鍵幀多，則將其KeyTime值解析為零;如果只有一個關鍵幀，并且其KeyTime值為Paced，則解析為總插值時間，如上一步所述。 - 5 解析剩余UniformKeyTime值：每個值都給定可用時間的相等份額。 在此過程中PacedKeyTime，未解析的值將暫時視為UniformKeyTime值，并獲得臨時解析的時間。
- 6 使用聲明KeyTime的最接近具有已解析KeyTime值的關鍵幀，解決未指定密鑰時間的關鍵幀的值。
- 7 解析剩余PacedKeyTime值。 PacedKeyTime使用相鄰KeyTime關鍵幀的值來確定其解析時間。 目的是確保動畫速度在此關鍵幀的解析時間內(nèi)保持固定不變。
- 8 按解析時間（主鍵）和聲明順序（輔助鍵）對關鍵幀進行排序，即根據(jù)已解決的關鍵幀KeyTime值使用穩(wěn)定排序。
到此這篇關于WPF關鍵幀動畫介紹與實現(xiàn)的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
asp.net下將純真IP數(shù)據(jù)導入數(shù)據(jù)庫中的代碼
純真IP數(shù)據(jù)庫包含最新的IP信息,通過IP我們可以查詢訪問者的來路，地理位置！但下載下來的IP數(shù)據(jù)無法被我們直接調(diào)用，所以我們需要編寫代碼將IP寫入到數(shù)據(jù)庫中供我們使用!2011-01-01
ASP.NET實現(xiàn)將word文檔轉(zhuǎn)換成pdf的方法
這篇文章主要介紹了ASP.NET實現(xiàn)將word文檔轉(zhuǎn)換成pdf的方法,包含了兩種實現(xiàn)方法進行比對分析,非常具有實用價值,需要的朋友可以參考下2014-10-10
HTTP.SYS本質(zhì)上就是一個HTTP/HTTPS監(jiān)聽器，它是Windows網(wǎng)絡子系統(tǒng)的一部分，是一個在內(nèi)核模式下運行的網(wǎng)絡驅(qū)動，今天通過本文給大家介紹下ASP.NET?Core高性能服務器HTTP.SYS，感興趣的朋友一起看看吧2022-04-04
使用ajax局部刷新gridview進行數(shù)據(jù)綁定示例
很多用戶都有這樣需求，比如：點擊按鈕，刷新 GridView 中的數(shù)據(jù)，而不是這個頁面刷新。使用簡單的 XMLHttpRequest就可以直接實現(xiàn)2014-02-02
ASP.NET Core 實現(xiàn)基本認證的示例代碼
這篇文章主要介紹了ASP.NET Core 實現(xiàn)基本認證的示例代碼嗎，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
我們知道，DropDownList下拉框是一個服務器控件，有時候，有些朋友為了方便綁定DropDownList下拉框的選項，但又想在DropDownList實現(xiàn)客戶端的下拉事件，那該怎么實現(xiàn)呢？2015-09-09
ASP.NET SignaiR 實現(xiàn)消息的即時推送，并使用Push.js實現(xiàn)通知的示例代碼
ASP.NET SignalR 是為 ASP.NET 開發(fā)人員提供的一個庫，可以簡化開發(fā)人員將實時 Web 功能添加到應用程序的過程。有興趣的可以了解一下。2017-01-01
使用Blazor框架實現(xiàn)在前端瀏覽器中導入和導出Excel
Blazor?是一個相對較新的框架，用于構(gòu)建具有?.NET?強大功能的交互式客戶端?Web?UI，本文主要介紹了如何在?Blazor?應用程序中實現(xiàn)?SpreadJS?利用?.NET?的強大功能完成瀏覽器端的?Excel?導入導出，需要的可以參考一下2023-05-05
ASP.NET頁面在IE緩存的清除辦法，需要的朋友可以參考一下2013-03-03
這篇文章介紹了C#.NET發(fā)送郵件的實例代碼，有需要的朋友可以參考一下，希望對你有所幫助2013-07-07