基於路徑的動畫使用PathGeometry對象設置屬性。儘管原則上基於路徑的動畫也能用於修改任何適當數據類型的屬性,但當動態改變與位置相關的屬性時最有用。實際上,基於路徑的動畫類主要用於幫助沿着一條路徑移動可視化對象。html
正如在「【WPF學習】第四十三章 路徑和幾何圖形」學過的,PathGeometry對象描述可包含直線、弧線以及曲線的圖形。下圖顯示的示例具備一個PathGeometry對象,該對象包含兩條弧線以及一條將最後定義的點鏈接到起點的直線段。這樣就建立了一條閉合的路線,一個小的矢量圖像以恆定不變的速度在這條路徑上運動。學習
下圖顯示的示例具備一個PathGeometry對象,該對象包含兩條弧線以及一條將最後定義的點鏈接到起點的直線段。這樣就建立了一條閉合的路線,一個小的矢量圖像以恆定不變的速度在這一條路徑上運動。動畫
建立這個示例很容易。第一步是構建但願使用的路徑。在這個示例中,路徑被定義爲資源:spa
<Window.Resources> <PathGeometry x:Key="path"> <PathFigure IsClosed="True"> <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment> <ArcSegment Point="400,50" Size="5,5" ></ArcSegment> </PathFigure> </PathGeometry> </Window.Resources>
這個示例顯示了路徑,固然這不是必須的。這樣能夠清晰地看到圖像沿着定義的路徑運動。爲顯示路徑,只須要添加一個使用上面定義的集合圖形的Path元素:code
<Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10"> </Path>
Path元素被放置到Canvas面板上,另外,但願沿着該路徑運動的Image元素也被放在Canvas面板上:htm
<Image Name="image"> <Image.Source> <DrawingImage> <DrawingImage.Drawing> <GeometryDrawing Brush="LightSteelBlue"> <GeometryDrawing.Geometry> <GeometryGroup> <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4" /> <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9" /> </GeometryGroup> </GeometryDrawing.Geometry> <GeometryDrawing.Pen> <Pen Thickness="1" Brush="Black" /> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingImage.Drawing> </DrawingImage> </Image.Source> </Image>
最後建立移動圖像的動畫。爲移動圖像,須要調整Canvas.Left和Canvas.Top屬性。DoubleAnimationUsingPath動畫類可完成該任務,但須要兩個動畫——一個用於處理Canvas.Left屬性,另外一個用於處理Canvas.Top屬性。下面是完整的故事板:對象
<Storyboard> <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)" PathGeometry="{StaticResource path}" Duration="0:0:5" RepeatBehavior="Forever" Source="X" /> <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)" PathGeometry="{StaticResource path}" Duration="0:0:5" RepeatBehavior="Forever" Source="Y" /> </Storyboard>
正如可能看到的,當建立基於路徑的動畫時,不是提供開始值和結束值,而是經過PathGeometry屬性指定但願使用的PathGeometry對象。一些基於路徑的動畫類,如PointAnimationUsingPath類,可同時爲目標屬性應用X和Y組件。但DoubleAnimationUsingPath類不具有這一能力,由於它只能設置雙精度值。結果,還須要將Source屬性設置爲X或Y,以指示是使用路徑的X座標仍是Y座標。blog
儘管基於路徑的動畫可以使用包含貝塞爾曲線的路徑,但它與上一章介紹的關鍵樣條動畫區別很大。在關鍵樣條動畫中,貝塞爾曲線描述動畫進度和時間之間的關係,從而能夠建立變速動畫。但在基於路徑的動畫中,由直線和曲線的集合構成的路徑決定了將用於動畫屬性的值。ip