到目前為止，看到的所有影片都使用線性插值從起點到終點，但如果需要創建具有多個分段的影片和不規則移動的影片，例如，可能希望創建一個影片，快速地將一個元素滑入到視圖中，然后慢慢地將它移到正確位置，可通過創建兩個連續的影片，并使用BeginTime屬性在第一個影片之后開始第二個影片來實作這種效果，然而，還有更簡單的方法——可使用關鍵幀影片，
關鍵幀影片是由許多較短的段構成的影片，每段表示影片中的初始值，最終值或中間值當運行影片時，它平滑地從一個值移到另一個值，
例如，分析下面的將RadialGradientBrush畫刷的中心點從一個位置移到另一個位置的Point影片：
<PointAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin" From="0.7,0.3" To="0.3,0.7" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever"> </PointAnimation>
可使用一個效果相同的PointAnimationUsingKeyFrames物件代替這個PointAnimation物件，如下所示：
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin" AutoReverse="True" RepeatBehavior="Forever">
<LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame>
<LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:10"></LinearPointKeyFrame>
</PointAnimationUsingKeyFrames>
這個影片包含兩個關鍵幀，當影片首次啟動時第一個關鍵幀設定Point值(如果希望使用在RadialGradientBrush畫刷中設定的當前值，可省略這個關鍵幀)，第二個關鍵幀定義結束值，這是10秒之后達到的數值，PointAnimationUsingKeyFrames物件執行線性插值，從第一個關鍵幀平滑移到第二個關鍵幀，就像PointAnimation物件對From和To值執行的操作一樣，
可使用一系列關鍵幀創建更有趣的示例，下面的影片通過在不同的時刻到達的一系列位置經歷中心點，中心點的移動速度根據關鍵幀之間的持續時間以及需要移動的距離而改變，
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin" RepeatBehavior="Forever"> <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:5"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"></LinearPointKeyFrame> </PointAnimationUsingKeyFrames>
這個影片不是可反轉的，但可以重復，為確保在一次迭代的最后資料和下一次迭代的開始數值之間不會出現跳躍，應使影片的結束點和開始點位于相同的中心點，
一、離散的關鍵幀影片
上面示例中的關鍵幀影片使用線性關鍵幀，所以，它在關鍵幀值之間平滑地過渡，另一種選擇是使用離散的關鍵幀，對于這種情況，不進行插值，當到達關鍵時間時，屬性突然改變為新值，
線性關鍵幀類使用“Linear+資料型別+KeyFrame”的形式進行命名，離散關鍵幀類使用“Discrete+資料型別+KeyFrame”的形式命名，下面是RadialGradientBrush畫刷示例的修改版本，在該修改版本中使用的是離散關鍵幀：
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin" RepeatBehavior="Forever"> <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.3,0.7" KeyTime="0:0:5"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"></DiscretePointKeyFrame> </PointAnimationUsingKeyFrames>
當運行這個影片時，中心點在適當的時間從一個位置跳到下一個位置，這是戲劇性的（但是不平穩的）效果，
所有關鍵幀影片類都支持離散關鍵幀，但只有一部分關鍵幀影片類支持線性關鍵幀，這完全取決于資料型別，支持線性關鍵幀的資料型別也支持線性插值，并提供了相應的DataTypeAnimation類，如Point、Color以及double，不支持線性插值的資料型別包括字串和物件，
二、緩動關鍵幀
通過“【WPF學習】第五十一章 影片緩動 ”的學習，看到了如何使用緩動函式改進普通影片，盡管關鍵幀影片被分割成多段，但每段仍使用普遍的、令人厭煩的線性插值，
如果這不是希望的結果，可使用緩動函式為每個關鍵幀添加加速和減速的效果，然而，普通的線性插值關鍵幀類和離散關鍵幀類不支持該特征，相反，需要使用緩動關鍵幀，如EasingDoubleKeyFrame、EasingColorKeyFrame或EasingPointKeyFrame，每個緩動關鍵幀類和對應的線性插值關鍵幀類的作業方式相同，但是額外提供了EasingFunction屬性，
下面的示例使用影片緩動為前5秒得關鍵幀影片應用加速效果：
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin" RepeatBehavior="Forever"> <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame> <EasingPointKeyFrame Value="0.3,0.7" KeyTime="0:0:5"> <EasingPointKeyFrame.EasingFunction> <CircleEase></CircleEase> </EasingPointKeyFrame.EasingFunction> </EasingPointKeyFrame> <LinearPointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"></LinearPointKeyFrame> <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"></LinearPointKeyFrame> </PointAnimationUsingKeyFrames>
結合使用關鍵幀和影片緩動是構建復雜影片模型的簡便方式，但仍可能無法提供所需的控制，不使用影片緩動，可創建數學公式指示影片的進度，
三、樣條關鍵幀影片
還有一種關鍵幀型別：樣條關鍵幀，每個支持線性關鍵幀的類也支持樣條關鍵幀，它們使用“Spline+資料型別+KeyFrame”的形式進行命名，
與線性關鍵幀一樣，樣條關鍵幀使用插值從一個鍵值平滑地移到另一個鍵值，區別是每個樣條關鍵幀都是KeySpline屬性，可使用該屬性定義能影響插值方式的三次貝塞爾曲線，盡管為了得到希望的效果這樣做有些繁瑣，但這種技術能創建更加連貫的加速和減速以及更逼真的影片效果，
在前面章節學習過，貝塞爾曲線由起點、終點以及兩個控制點定義，對于關鍵樣條，起點總是（0，0），終點總是（1,1），用戶只需要提供兩個控制點，創建的曲線描述了時間(X軸)和影片值(Y值)之間的關系，
下面的示例通過對比Canvas面板上兩個橢圓的移動，演示了一個關鍵幀樣條影片，第一個橢圓使用DoubleAnimation影片緩慢勻速地再視窗上移動，第二個橢圓使用具有兩個SplineDoubleKeyFrame物件的DoubleAnimationUsingKeyFrames影片，兩個橢圓同時到達目的位置(10秒后)，但第二個橢圓在運動程序中會有明顯的加速和減速，減速時會超過第一個橢圓而減速時又會落后于第一個橢圓，
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" > <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250" KeySpline="0.25,0 0.5,0.7"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="0:0:10" Value="500" KeySpline="0.25,0.8 0.2,0.4"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" To="500" Duration="0:0:10"> </DoubleAnimation>
最快的加速發生在5秒后不久，也就是當進入第二個SplineDoubleKeyFrame關鍵幀時，貝塞爾曲線的第一個控制點將較大的表示影片進度(0.8)的Y軸值與較小的表示時間的X軸值相匹配，所以，在再次減慢速度前，橢圓在一小段距離內會增加速度，
下圖以圖形方式顯示了兩條控制橢圓運動的曲線，為理解這些曲線，請記住它們從頂部到底部描述了影片程序，觀察第一條曲線可以發現，它相對均勻地下降，在開始處有較短的暫停，在末尾處平緩下降，然而第二條曲線快速下降，運動了一個大段距離，然后對于剩余的影片部分，曲線緩緩下降，
示例的完整XAML標記如下所示：
<Window x:Class="Animation.KeySplineAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="KeySplineAnimation" Height="300" Width="624" WindowStartupLocation="CenterScreen"> <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" > <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250" KeySpline="0.25,0 0.5,0.7"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="0:0:10" Value="500" KeySpline="0.25,0.8 0.2,0.4"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" To="500" Duration="0:0:10"> </DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Window.Triggers> <Canvas Margin="10"> <Ellipse Name="ellipse1" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse> <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Top="25"> <Path.Data> <PathGeometry> <PathFigure> <BezierSegment Point1="25,0" Point2="50,70" Point3="100,100" /> </PathFigure> </PathGeometry> </Path.Data> <Path.RenderTransform> <ScaleTransform ScaleX="2.5"></ScaleTransform> </Path.RenderTransform> </Path> <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Left="250" Canvas.Top="25"> <Path.Data> <PathGeometry> <PathFigure> <BezierSegment Point1="25,80" Point2="20,40" Point3="100,100" /> </PathFigure> </PathGeometry> </Path.Data> <Path.RenderTransform> <ScaleTransform ScaleX="2.5"></ScaleTransform> </Path.RenderTransform> </Path> <Ellipse Name="ellipse2" Canvas.Top="150" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse> </Canvas> </Window>KeySplineAnimation
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/2977.html
標籤：WPF