WPF關(guān)鍵幀動(dòng)畫介紹與實(shí)現(xiàn)
本章介紹關(guān)鍵幀動(dòng)畫之前, 首先需要講解一下關(guān)于WPF當(dāng)中基礎(chǔ)動(dòng)畫與本章所講的關(guān)鍵幀動(dòng)畫的區(qū)別。
動(dòng)畫與關(guān)鍵幀的區(qū)別
普通動(dòng)畫
WPF基礎(chǔ)動(dòng)畫當(dāng)中, 我們熟悉的From/To/By驅(qū)動(dòng)的動(dòng)畫, 主要在兩個(gè)值之間創(chuàng)建過渡效果, 如下圖所示:
下面是使用普通的ThicknessAnimation創(chuàng)建的愛心跳動(dòng)的動(dòng)畫
關(guān)鍵幀
對(duì)于關(guān)鍵幀動(dòng)畫而言,關(guān)鍵幀動(dòng)畫沒有From/To/By的屬性, 而關(guān)鍵幀動(dòng)畫的值則是使用幀對(duì)象來進(jìn)行描述, 故稱之為關(guān)鍵幀動(dòng)畫, 如下所示:
下面是使用關(guān)鍵幀動(dòng)畫創(chuàng)建的一個(gè)矩形位移的動(dòng)畫
注： 能夠注意到, 左下角, 描述了整個(gè)動(dò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)鍵幀對(duì)象(Frame) 主要包含兩個(gè)參數(shù), Value是目標(biāo)值， KeyTime 則表達(dá)的是時(shí)間
到目前為止, 我們應(yīng)該可以理解普通動(dòng)畫與關(guān)鍵幀動(dòng)畫的區(qū)別, 對(duì)于幀動(dòng)畫而言, 在于控制每一個(gè)幀的表現(xiàn)形式, 這一點(diǎn)并不像普通動(dòng)畫中, 對(duì)于整個(gè)動(dòng)畫的控制我們只能從開始到結(jié)束, 而幀動(dòng)畫可以控制開始到結(jié)束的整個(gè)過程。
介紹關(guān)鍵幀動(dòng)畫
下面,介紹了如何創(chuàng)建一個(gè)簡(jiǎn)單的關(guān)鍵幀動(dòng)畫。
1.如下代碼,創(chuàng)建了一個(gè)矩形, 為其添加了一個(gè)點(diǎn)擊時(shí)間觸發(fā)動(dòng)畫, 該動(dòng)畫在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)建了一個(gè)DoubleAnimation類型的幀動(dòng)畫, 為其綁定了一個(gè)目標(biāo)及目標(biāo)的動(dòng)畫依賴屬性 "Y", Duration則為其設(shè)定了一個(gè)幀動(dòng)畫持續(xù)時(shí)間,在關(guān)鍵幀動(dòng)畫的集合中, 定義了多個(gè)線性關(guān)鍵幀(LinearDoubleKeyFrame), 為其設(shè)定了Value目標(biāo)值和KeyTime持續(xù)時(shí)間。
此處說講到的線性關(guān)鍵幀所屬其中的一種類型, 在后面將會(huì)有更多的介紹。
關(guān)鍵幀動(dòng)畫類型
關(guān)鍵幀動(dòng)畫屬于System.Windows.Media.Animation命令空間下, 命名規(guī)則約定為
AnimationUsingKeyFrames
Type: 為動(dòng)畫的值類型, 例如上面的動(dòng)畫當(dāng)中, 需要給舉行的X軸移動(dòng)位置, X的值屬于雙精度類型, 所以定義的類型為 :DoubleAnimationUsingKeyFrames 。
關(guān)鍵幀的動(dòng)畫類型列表
幀對(duì)象的類型
正如我們創(chuàng)建不同類型的動(dòng)畫, 我們需要按照約定命名方式定義, 如: DoubleAnimation, ColorAnimation 等等。
對(duì)于幀動(dòng)畫而言, 主要由一個(gè)或者N個(gè)幀對(duì)象組成(Frame), 幀對(duì)象同時(shí)也擁有不同的種類, 故幀對(duì)象遵循一下的命名約定:
<插值方法><類型>
插值方法: 是幀對(duì)象使用的插值方法, 如: 離散(Discrete)、線性(Linear) 、樣條(Spline) 等。
類型: 是動(dòng)畫的值類型, 例如Double、Decimal等。
KeyFrame: 固定的幀對(duì)象語法結(jié)束
關(guān)鍵幀的主要目的是指定 和KeyTime、Value 每個(gè)關(guān)鍵幀類型都可提供這兩種屬性。
- 屬性Value指定該關(guān)鍵幀的目標(biāo)值。
- 該KeyTime屬性指定何時(shí)（在動(dòng)畫的Duration）中到達(dá)關(guān)鍵幀。 Value
當(dāng)關(guān)鍵幀動(dòng)畫開始時(shí)，按其KeyTime屬性定義的順序遍接其關(guān)鍵幀。 - 如果時(shí)間 0 時(shí)沒有關(guān)鍵幀，動(dòng)畫會(huì)在目標(biāo)屬性的當(dāng)前值和第Value一個(gè)關(guān)鍵幀之間的轉(zhuǎn)換;否則，動(dòng)畫的輸出值將成為第一個(gè)關(guān)鍵幀的值。
- 動(dòng)畫使用第二個(gè)關(guān)鍵幀指定的Value插值方法在第一個(gè)關(guān)鍵幀和第二個(gè)關(guān)鍵幀之間創(chuàng)建過渡。 轉(zhuǎn)換從第一個(gè)關(guān)鍵幀開始KeyTime，并在到達(dá)第二個(gè)關(guān)鍵幀KeyTime時(shí)結(jié)束。
- 動(dòng)畫將繼續(xù)，這會(huì)創(chuàng)建每個(gè)后續(xù)關(guān)鍵幀和其前面的關(guān)鍵幀之間的過渡。
- 最后，動(dòng)畫轉(zhuǎn)換為關(guān)鍵幀的值，其最大鍵時(shí)間等于或小于動(dòng)畫的值Duration。
如果動(dòng)畫的Duration或Automatic其Duration等于最后一個(gè)關(guān)鍵幀的時(shí)間，則動(dòng)畫結(jié)束。 否則，如果動(dòng)畫大于Duration最后一個(gè)關(guān)鍵幀的鍵時(shí)間，則動(dòng)畫將保留關(guān)鍵幀值，直到到達(dá)其Duration的末尾。 與所有動(dòng)畫一樣，關(guān)鍵幀動(dòng)畫使用其FillBehavior屬性來確定在到達(dá)活動(dòng)周期結(jié)束時(shí)是否保留最終值。
插值方法
下面將主要介紹有三種不同類型的內(nèi)插方法: 線性、離散和曲線。
線性內(nèi)插
使用線性內(nèi)插，動(dòng)畫將以段持續(xù)時(shí)間的固定速度進(jìn)行播放。 例如，如果關(guān)鍵幀段從 0 過渡到 10，持續(xù)時(shí)間為 5 秒，則動(dòng)畫會(huì)在指定時(shí)間輸出以下值：
離散內(nèi)插
使用離散內(nèi)插，動(dòng)畫函數(shù)將從一個(gè)值跳到下一個(gè)值，沒有內(nèi)插。 如果關(guān)鍵幀段從 0 過渡到 10，持續(xù)時(shí)間為 5 秒，則動(dòng)畫會(huì)在指定時(shí)間輸出以下值：
注: 通過觀察線性和離散的插入比較, 可以清晰的看出來, 離線類型的插入方式, 在動(dòng)畫的執(zhí)行過程中, 我們無法在規(guī)定的時(shí)間內(nèi)觀察其變化效果, 直接至?xí)r間結(jié)束后, 到指定的目標(biāo)值。
曲線內(nèi)插
曲線內(nèi)插可能很難理解；使用不同的設(shè)置進(jìn)行體驗(yàn)有助于理解。 通過主曲線動(dòng)畫示例，可以更改主曲線值，并查看由此所產(chǎn)生的動(dòng)畫結(jié)果, 可以查看最上方視頻進(jìn)行理解。
組合內(nèi)插
可在一個(gè)關(guān)鍵幀動(dòng)畫中使用具有不同內(nèi)插類型的關(guān)鍵幀。 如果兩個(gè)具有不同內(nèi)插的關(guān)鍵幀動(dòng)畫彼此跟隨，第二個(gè)關(guān)鍵幀的內(nèi)插方法將用于創(chuàng)建從第一個(gè)值到第二個(gè)值的過渡。
下面的示例,演示了一個(gè)使用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
與其他動(dòng)畫一樣，關(guān)鍵幀動(dòng)畫具有屬性Duration。 除了指定動(dòng)畫的Duration外，還需要指定每個(gè)關(guān)鍵幀的持續(xù)時(shí)間的哪一部分。 為此，您可以為每個(gè)動(dòng)畫的關(guān)鍵KeyTime幀描述 。 每個(gè)關(guān)鍵幀指定KeyTime該關(guān)鍵幀的結(jié)束時(shí)間。
屬性KeyTime不指定密鑰時(shí)間播放的時(shí)間。 關(guān)鍵幀的播放時(shí)長(zhǎng)由關(guān)鍵幀的結(jié)束時(shí)間、前一個(gè)關(guān)鍵幀的結(jié)束時(shí)間以及動(dòng)畫的持續(xù)時(shí)間確定。 關(guān)鍵時(shí)間可以指定為時(shí)間值、百分比或特殊值Uniform或Paced。
TimeSpan
以下示例演示一個(gè)持續(xù)時(shí)間為 10 秒鐘、有四個(gè)關(guān)鍵幀（這些關(guān)鍵幀的關(guān)鍵時(shí)間指定為時(shí)間值）的動(dòng)畫。
- 在前 3 秒鐘內(nèi)，第一個(gè)關(guān)鍵幀在基值和 100 之間進(jìn)行動(dòng)畫處理，結(jié)束時(shí)間 = 0:0:03。
- 第二個(gè)關(guān)鍵幀在 100 和 200 之間進(jìn)行動(dòng)畫處理。 它在第一個(gè)關(guān)鍵幀結(jié)束后開始（開始時(shí)間 = 3 秒），播放 5 秒鐘，結(jié)束時(shí)間 = 0:0:8。
- 第三個(gè)關(guān)鍵幀在 200 和 500 之間進(jìn)行動(dòng)畫處理。 它在第二個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 8 秒），播放 1 秒鐘，結(jié)束時(shí)間 = 0:0:9。
- 第四個(gè)關(guān)鍵幀在 500 和 600 之間進(jìn)行動(dòng)畫處理。 它在第三個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 9 秒），播放 1 秒鐘，結(jié)束時(shí)間 = 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)鍵幀以動(dòng)畫的某些Duration百分比結(jié)束。 在 XAML 中，指定百分比作為 % 符號(hào)后的數(shù)字。 在代碼中，使用FromPercent方法并傳遞一個(gè)Double指示百分比的方法。 該值必須大于或等于 0 并且小于或等于 100%。 以下示例演示一個(gè)持續(xù)時(shí)間為 10 秒鐘、有四個(gè)關(guān)鍵幀（這些關(guān)鍵幀的關(guān)鍵時(shí)間指定為百分比）的動(dòng)畫。
- 在前 3 秒鐘內(nèi)，第一個(gè)關(guān)鍵幀將在基值和 100 之間進(jìn)行動(dòng)畫處理，結(jié)束時(shí)間 = 0:0:3。
- 第二個(gè)關(guān)鍵幀在 100 和 200 之間進(jìn)行動(dòng)畫處理。 它在第一個(gè)關(guān)鍵幀結(jié)束后開始（開始時(shí)間 = 3 秒），播放 5 秒鐘，結(jié)束時(shí)間 = 0:0:8 (0.8 * 10 = 8)。
- 第三個(gè)關(guān)鍵幀在 200 和 500 之間進(jìn)行動(dòng)畫處理。 它在第二個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 8 秒），播放 1 秒鐘，結(jié)束時(shí)間 = 0:0:9 (0.9 * 10 = 9)。
- 第四個(gè)關(guān)鍵幀在 500 和 600 之間進(jìn)行動(dòng)畫處理。 它在第三個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 9 秒），播放 1 秒鐘，結(jié)束時(shí)間 = 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希望每個(gè)關(guān)鍵幀花費(fèi)相同的時(shí)間時(shí)，請(qǐng)使用計(jì)時(shí)。
Uniform關(guān)鍵時(shí)間將可用時(shí)間平均除以關(guān)鍵幀數(shù)，以確定每個(gè)關(guān)鍵幀的結(jié)束時(shí)間。 下面的示例顯示持續(xù)時(shí)間為 10 秒的動(dòng)畫和四個(gè)關(guān)鍵幀，其關(guān)鍵時(shí)間指定為Uniform。
- 在前 2.5 秒鐘內(nèi)，第一個(gè)關(guān)鍵幀在基值和 100 之間進(jìn)行動(dòng)畫處理，結(jié)束時(shí)間 = 0:0:2.5。
- 第二個(gè)關(guān)鍵幀在 100 和 200 之間進(jìn)行動(dòng)畫處理。 它在第一個(gè)關(guān)鍵幀結(jié)束后開始（開始時(shí)間 = 2.5 秒），播放大約 2.5 秒鐘，結(jié)束時(shí)間 = 0:0:5。
- 第三個(gè)關(guān)鍵幀在 200 和 500 之間進(jìn)行動(dòng)畫處理。 它在第二個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 5 秒），播放 2.5 秒鐘，結(jié)束時(shí)間 = 0:0:7.5。
- 第四個(gè)關(guān)鍵幀在 500 和 600 之間進(jìn)行動(dòng)畫處理。 它在第二個(gè)關(guān)鍵幀結(jié)束時(shí)開始（開始時(shí)間 = 7.5 秒），播放 2.5 秒鐘，結(jié)束時(shí)間 = 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)行動(dòng)畫處理，請(qǐng)使用計(jì)時(shí)。
Paced關(guān)鍵時(shí)間根據(jù)每個(gè)關(guān)鍵幀的長(zhǎng)度分配可用時(shí)間，以確定每個(gè)幀的持續(xù)時(shí)間。 這樣，動(dòng)畫的速度或速率將保持不變。 下面的示例顯示持續(xù)時(shí)間為 10 秒的動(dòng)畫和三個(gè)關(guān)鍵幀，其關(guān)鍵時(shí)間指定為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)鍵幀時(shí)間及順序
可以在同一動(dòng)畫中使用具有不同KeyTime值類型的關(guān)鍵幀。 盡管建議以關(guān)鍵幀的實(shí)際播放順序來添加關(guān)鍵幀，但此操作不是必需的。 動(dòng)畫和計(jì)時(shí)系統(tǒng)能夠處理順序紊亂的關(guān)鍵幀。 將忽略關(guān)鍵時(shí)間無效的關(guān)鍵幀。
下表描述了為關(guān)鍵幀動(dòng)畫的關(guān)鍵幀解析關(guān)鍵時(shí)間的過程。
- 1 解析TimeSpanKeyTime值。
- 2 確定動(dòng)畫的總內(nèi)插時(shí)間，即關(guān)鍵幀動(dòng)畫完成向前迭代所需的全部時(shí)間。
如果動(dòng)畫的Duration不是Automatic或Forever，則總插值時(shí)間是動(dòng)畫Duration屬性的值。
否則，總插值時(shí)間是其關(guān)鍵幀（TimeSpanKeyTime如果有）之間指定的最大值。
否則，總內(nèi)插時(shí)間為 1 秒。 - 3 使用總插值時(shí)間值解析PercentKeyTime值。
- 4 如果最后一個(gè)關(guān)鍵幀尚未在之前步驟中解析，則將解析該關(guān)鍵幀。 如果最后KeyTime一個(gè)關(guān)鍵幀為Uniform或Paced，則其解析時(shí)間將等于總插值時(shí)間。
如果第KeyTime一個(gè)關(guān)鍵幀的，Paced并且此動(dòng)畫比關(guān)鍵幀多，則將其KeyTime值解析為零;如果只有一個(gè)關(guān)鍵幀，并且其KeyTime值為Paced，則解析為總插值時(shí)間，如上一步所述。 - 5 解析剩余UniformKeyTime值：每個(gè)值都給定可用時(shí)間的相等份額。 在此過程中PacedKeyTime，未解析的值將暫時(shí)視為UniformKeyTime值，并獲得臨時(shí)解析的時(shí)間。
- 6 使用聲明KeyTime的最接近具有已解析KeyTime值的關(guān)鍵幀，解決未指定密鑰時(shí)間的關(guān)鍵幀的值。
- 7 解析剩余PacedKeyTime值。 PacedKeyTime使用相鄰KeyTime關(guān)鍵幀的值來確定其解析時(shí)間。 目的是確保動(dòng)畫速度在此關(guān)鍵幀的解析時(shí)間內(nèi)保持固定不變。
- 8 按解析時(shí)間（主鍵）和聲明順序（輔助鍵）對(duì)關(guān)鍵幀進(jìn)行排序，即根據(jù)已解決的關(guān)鍵幀KeyTime值使用穩(wěn)定排序。
到此這篇關(guān)于WPF關(guān)鍵幀動(dòng)畫介紹與實(shí)現(xiàn)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
asp.net(C#)防sql注入組件的實(shí)現(xiàn)代碼
經(jīng)常要寫一些.net的程序，對(duì)于數(shù)據(jù)庫的防注入要求要比較高。這時(shí)我從網(wǎng)上搜了一些代碼。查看了一下主要是通過HTTPModel來進(jìn)行對(duì)客戶端轉(zhuǎn)過來的數(shù)據(jù)進(jìn)行處理。2009-12-12
在AspNetCore中使用極驗(yàn)做行為認(rèn)證的驗(yàn)證流程
這篇文章主要介紹了在AspNetCore中使用極驗(yàn)做行為認(rèn)證的驗(yàn)證流程 ,本文有圖文介紹有實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
ASP.NET中實(shí)現(xiàn)jQuery Validation-Engine的Ajax驗(yàn)證
在jQuery的表變驗(yàn)證插件中Validation-Engine是一款高質(zhì)量的產(chǎn)品，提示效果非常精美，而且里面包含了AJAX驗(yàn)證功能2012-06-06
獲取WebService的請(qǐng)求信息方法實(shí)例
下面小編就為大家分享一篇獲取WebService的請(qǐng)求信息方法實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
2008-01-01
這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)畫線動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章介紹了.NET6自定義WebAPI過濾器的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
asp.net利用NamingContainer屬性獲取GridView行號(hào)的方法
在最近的一個(gè)項(xiàng)目中，用到在GridView模板列中添加有DropDownList控件，并開啟其AutoPostback屬性。當(dāng)發(fā)生SelectedIndexChanged事件時(shí)，想同時(shí)獲取其所在的行號(hào)，從而獲取相應(yīng)的行信息。2013-07-07
這篇文章主要介紹了如何在.Net版本UEditor中添加一個(gè)普通按鈕,需要的朋友可以參考下2014-12-12
該函數(shù)把光標(biāo)移到屏幕的指定位置,如果新位置不在由ClipCursor函數(shù)設(shè)置的屏幕矩形區(qū)域之內(nèi)，則系統(tǒng)自動(dòng)調(diào)整坐標(biāo)，使得光標(biāo)在矩形之內(nèi)2012-12-12