WPF之基於路徑的動畫

　　不是突然想到要做一個路徑動畫的，是今天談業務需求的時候偶然談到的，

　　一艘船從一個國家到另外一個國家，沿着一條固定的路線前進，就是一個簡單的動畫效果，以前貌似在書上看到過，所以自己也來做一個。

　　在網上搜資料發現都是給你看看代碼，或者邊寫邊看代碼。

　　認為還是要先研究一下這個東西要如何實現吧，參考資料是《WPF編程寶典》。

　　其實中心思想還是很簡單的，主要是設置對象的Storyboard中DoubleAnimationsUsingPath的PathGeometry屬性。

　　下面這個實例是去則WPF變成寶典之中，因為不太復雜，就隨便看看吧~

 

　　這個例子里面是對image這個對象進行操作，所謂動畫就是去根據路徑去改變image的位置，就是Canvas.Left和Canvas.Top，給PathGeometry綁定設定好的路徑，然后指定Source是對應的XY軸。

　　

<Window x:Class="Animation.PathBasedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PathBasedAnimation" Height="381.6" Width="521.6"
    >
  
  <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>
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <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>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
  <Canvas Margin="10">
    <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">      
    </Path>
    <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>
</Window>

　　完全不難，但是我自己還是沒有記得，所以寫了一篇短短的Blog.