到目前為止，看到的所有動畫都使用線性插值從起點到終點。但如果需要創(chuàng)建具有多個分段的動畫和不規(guī)則移動的動畫。例如，可能希望創(chuàng)建一個動畫，快速地將一個元素滑入到視圖中，然后慢慢地將它移到正確位置。可通過創(chuàng)建兩個連續(xù)的動畫，并使用BeginTime屬性在第一個動畫之后開始第二個動畫來實現(xiàn)這種效果。然而，還有更簡單的方法——可使用關(guān)鍵幀動畫。

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)涪陵免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

關(guān)鍵幀動畫是由許多較短的段構(gòu)成的動畫。每段表示動畫中的初始值，最終值或中間值當(dāng)運(yùn)行動畫時，它平滑地從一個值移到另一個值。

例如，分析下面的將RadialGradientBrush畫刷的中心點從一個位置移到另一個位置的Point動畫：

                                From="0.7,0.3" To="0.3,0.7" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever">

                

可使用一個效果相同的PointAnimationUsingKeyFrames對象代替這個PointAnimation對象，如下所示：

復(fù)制代碼

復(fù)制代碼

這個動畫包含兩個關(guān)鍵幀。當(dāng)動畫首次啟動時第一個關(guān)鍵幀設(shè)置Point值(如果希望使用在RadialGradientBrush畫刷中設(shè)置的當(dāng)前值，可省略這個關(guān)鍵幀)。第二個關(guān)鍵幀定義結(jié)束值，這是10秒之后達(dá)到的數(shù)值。PointAnimationUsingKeyFrames對象執(zhí)行線性插值。從第一個關(guān)鍵幀平滑移到第二個關(guān)鍵幀，就像PointAnimation對象對From和To值執(zhí)行的操作一樣。

可使用一系列關(guān)鍵幀創(chuàng)建更有趣的示例。下面的動畫通過在不同的時刻到達(dá)的一系列位置經(jīng)歷中心點。中心點的移動速度根據(jù)關(guān)鍵幀之間的持續(xù)時間以及需要移動的距離而改變。

復(fù)制代碼

                                      RepeatBehavior="Forever">

                    

                    

                    

                    

                    

                    

復(fù)制代碼

這個動畫不是可反轉(zhuǎn)的，但可以重復(fù)。為確保在一次迭代的最后數(shù)據(jù)和下一次迭代的開始數(shù)值之間不會出現(xiàn)跳躍，應(yīng)使動畫的結(jié)束點和開始點位于相同的中心點。

一、離散的關(guān)鍵幀動畫

上面示例中的關(guān)鍵幀動畫使用線性關(guān)鍵幀。所以，它在關(guān)鍵幀值之間平滑地過渡，另一種選擇是使用離散的關(guān)鍵幀。對于這種情況，不進(jìn)行插值。當(dāng)?shù)竭_(dá)關(guān)鍵時間時，屬性突然改變?yōu)樾轮怠?/p>

線性關(guān)鍵幀類使用“Linear+數(shù)據(jù)類型+KeyFrame”的形式進(jìn)行命名。離散關(guān)鍵幀類使用“Discrete+數(shù)據(jù)類型+KeyFrame”的形式命名。下面是RadialGradientBrush畫刷示例的修改版本，在該修改版本中使用的是離散關(guān)鍵幀：

復(fù)制代碼

                                      RepeatBehavior="Forever">

                    

                    

                    

                    

                    

                    

復(fù)制代碼

當(dāng)運(yùn)行這個動畫時，中心點在適當(dāng)?shù)臅r間從一個位置跳到下一個位置。這是戲劇性的（但是不平穩(wěn)的）效果。

所有關(guān)鍵幀動畫類都支持離散關(guān)鍵幀，但只有一部分關(guān)鍵幀動畫類支持線性關(guān)鍵幀。這完全取決于數(shù)據(jù)類型。支持線性關(guān)鍵幀的數(shù)據(jù)類型也支持線性插值，并提供了相應(yīng)的DataTypeAnimation類，如Point、Color以及double。不支持線性插值的數(shù)據(jù)類型包括字符串和對象。

二、緩動關(guān)鍵幀

通過“【W(wǎng)PF學(xué)習(xí)】第五十一章 動畫緩動 ”的學(xué)習(xí)，看到了如何使用緩動函數(shù)改進(jìn)普通動畫。盡管關(guān)鍵幀動畫被分割成多段，但每段仍使用普遍的、令人厭煩的線性插值。

如果這不是希望的結(jié)果，可使用緩動函數(shù)為每個關(guān)鍵幀添加加速和減速的效果。然而，普通的線性插值關(guān)鍵幀類和離散關(guān)鍵幀類不支持該特征。相反，需要使用緩動關(guān)鍵幀，如EasingDoubleKeyFrame、EasingColorKeyFrame或EasingPointKeyFrame。每個緩動關(guān)鍵幀類和對應(yīng)的線性插值關(guān)鍵幀類的工作方式相同，但是額外提供了EasingFunction屬性。

下面的示例使用動畫緩動為前5秒得關(guān)鍵幀動畫應(yīng)用加速效果：

復(fù)制代碼

                                      RepeatBehavior="Forever">

                    

                    

                        

                            

                        

                    

                    

                    

                    

                    

復(fù)制代碼

結(jié)合使用關(guān)鍵幀和動畫緩動是構(gòu)建復(fù)雜動畫模型的簡便方式，但仍可能無法提供所需的控制。不使用動畫緩動，可創(chuàng)建數(shù)學(xué)公式指示動畫的進(jìn)度。

三、樣條關(guān)鍵幀動畫

還有一種關(guān)鍵幀類型：樣條關(guān)鍵幀。每個支持線性關(guān)鍵幀的類也支持樣條關(guān)鍵幀，它們使用“Spline+數(shù)據(jù)類型+KeyFrame”的形式進(jìn)行命名。

與線性關(guān)鍵幀一樣，樣條關(guān)鍵幀使用插值從一個鍵值平滑地移到另一個鍵值。區(qū)別是每個樣條關(guān)鍵幀都是KeySpline屬性。可使用該屬性定義能影響插值方式的三次貝塞爾曲線。盡管為了得到希望的效果這樣做有些繁瑣，但這種技術(shù)能創(chuàng)建更加連貫的加速和減速以及更逼真的動畫效果。

在前面章節(jié)學(xué)習(xí)過，貝塞爾曲線由起點、終點以及兩個控制點定義。對于關(guān)鍵樣條，起點總是（0，0），終點總是（1,1）。用戶只需要提供兩個控制點。創(chuàng)建的曲線描述了時間(X軸)和動畫值(Y值)之間的關(guān)系。

下面的示例通過對比Canvas面板上兩個橢圓的移動，演示了一個關(guān)鍵幀樣條動畫。第一個橢圓使用DoubleAnimation動畫緩慢勻速地再窗口上移動。第二個橢圓使用具有兩個SplineDoubleKeyFrame對象的DoubleAnimationUsingKeyFrames動畫。兩個橢圓同時到達(dá)目的位置(10秒后)，但第二個橢圓在運(yùn)動過程中會有明顯的加速和減速，減速時會超過第一個橢圓而減速時又會落后于第一個橢圓。

復(fù)制代碼

        Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" >

    

    

        Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)"

        To="500" Duration="0:0:10">

復(fù)制代碼

最快的加速發(fā)生在5秒后不久，也就是當(dāng)進(jìn)入第二個SplineDoubleKeyFrame關(guān)鍵幀時。貝塞爾曲線的第一個控制點將較大的表示動畫進(jìn)度(0.8)的Y軸值與較小的表示時間的X軸值相匹配。所以，在再次減慢速度前，橢圓在一小段距離內(nèi)會增加速度。

下圖以圖形方式顯示了兩條控制橢圓運(yùn)動的曲線。為理解這些曲線，請記住它們從頂部到底部描述了動畫過程。觀察第一條曲線可以發(fā)現(xiàn)，它相對均勻地下降，在開始處有較短的暫停，在末尾處平緩下降。然而第二條曲線快速下降，運(yùn)動了一個大段距離，然后對于剩余的動畫部分，曲線緩緩下降。