【WPF學習】第五十五章 基於路徑的動畫

　　基於路徑的動畫使用PathGeometry對象設置屬性。盡管原則上基於路徑的動畫也能用於修改任何適當數據類型的屬性，但當動態改變與位置相關的屬性時最有用。實際上，基於路徑的動畫類主要用於幫助沿着一條路徑移動可視化對象。

　　正如在“【WPF學習】第四十三章 路徑和幾何圖形”學過的，PathGeometry對象描述可包含直線、弧線以及曲線的圖形。下圖顯示的示例具有一個PathGeometry對象，該對象包含兩條弧線以及一條將最后定義的點連接到起點的直線段。這樣就創建了一條閉合的路線，一個小的矢量圖像以恆定不變的速度在這條路徑上運動。

　　下圖顯示的示例具有一個PathGeometry對象，該對象包含兩條弧線以及一條將最后定義的點連接到起點的直線段。這樣就創建了一條閉合的路線，一個小的矢量圖像以恆定不變的速度在這一條路徑上運動。

　　創建這個示例很容易。第一步是構建希望使用的路徑。在這個示例中，路徑被定義為資源：

<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元素：

<Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
</Path>

　　Path元素被放置到Canvas面板上，另外，希望沿着該路徑運動的Image元素也被放在Canvas面板上：

<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坐標。

　　盡管基於路徑的動畫可使用包含貝塞爾曲線的路徑，但它與上一章介紹的關鍵樣條動畫區別很大。在關鍵樣條動畫中，貝塞爾曲線描述動畫進度和時間之間的關系，從而可以創建變速動畫。但在基於路徑的動畫中，由直線和曲線的集合構成的路徑決定了將用於動畫屬性的值。