【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坐标。

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

　　

作者：Peter Luo

出處：https://www.cnblogs.com/Peter-Luo/

本文版權歸作者和部落格園共有，歡迎轉載，但必須給出原文連結，并保留此段聲明，否則保留追究法律責任的權利。