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

  基於路徑的動畫使用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

相關文章
相關標籤/搜索