WPF：Animation動畫--PathAnimation路徑動畫效果

PahtAnimation路徑動畫：

PointAnimationUsingPath使用路徑座標動畫效果

關注點：
1 PointAnimationUsingPath 類：對兩個或更多個目標值之間的 Point 屬性值進行動畫處理，經過使用 PathGeometry 指定這些目標值。 此動畫可用於沿着路徑移動可視對象。

1. 設置一個線性形狀Path及一個幾何圓的形狀Path

<Canvas HorizontalAlignment="Left" Width="340" Height="240" >
      
  <!-- This Path is only to show the path that the animated object will follow. -->
  <Path VerticalAlignment="Top" Margin="15,15,15,15" 
    Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
    Stroke="Black" StrokeThickness="2"
    Stretch="None" />
  
  <Path Fill="Blue" Margin="15,15,15,15">
    <Path.Data>
    
      <!-- Describes an ellipse. -->
      <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
        Center="10,100" RadiusX="15" RadiusY="15" />
    </Path.Data>
  </Path>
</Canvas>

1. 針對幾何圓使用路徑座標動畫PointAnimationUsingPath，此處需PointAnimationUsingPath.PathGeometry肯定路徑路線

<!-- Create a button to restart the animation. -->
<Button Width="80" HorizontalAlignment="Left" >Start Animation

  <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard>
          
          <!-- Animates the ellipse along the path. -->
          <PointAnimationUsingPath
            Storyboard.TargetName="MyAnimatedEllipseGeometry"
            Storyboard.TargetProperty="Center"
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <PointAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </PointAnimationUsingPath.PathGeometry>
          </PointAnimationUsingPath>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>      
</StackPanel>

DoubleAnimationUsingPathExample使用路徑浮點值動畫

同理針對矩形使用路徑浮點值動畫，不過動畫對象爲矩形的平移轉換器的X、Y值。

<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard>

          <!-- Animates the rectangle horizotally along the path. -->
          <DoubleAnimationUsingPath
            Storyboard.TargetName="MyAnimatedTransform"
            Storyboard.TargetProperty="X"
            Source="X" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>

          <!-- Animates the rectangle vertically along the path. -->
          <DoubleAnimationUsingPath
            Storyboard.TargetName="MyAnimatedTransform"
            Storyboard.TargetProperty="Y"
            Source="Y" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>

RotateAnimationUsingPathExample使用路徑的旋轉動畫

要使矩形沿着路徑運行，同時矩形的旋轉角度跟隨路線切線。

1. 設計有矩形形狀，且實例化有矩形的旋轉及平移轉換器。

<!-- This geometry renders the rectangle that is animated across the screen. -->
<Path Fill="Blue" Margin="0,0,15,15">
  <Path.Data>
    <RectangleGeometry  x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" >
      <RectangleGeometry.Transform>
        <TransformGroup>
          <RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="15" CenterY="15" />
          <TranslateTransform x:Name="MyTranslateTransform" X="10" Y="100" />
        </TransformGroup>
      </RectangleGeometry.Transform>
    </RectangleGeometry>
  </Path.Data>
</Path>

針對矩形的旋轉角度值DoubleAnimationUsingPath及平移轉換器的X、YDoubleAnimationUsingPath動畫：

<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard>

          <!-- Animates the angle along the path. -->
          <DoubleAnimationUsingPath
            Storyboard.TargetName="MyRotateTransform"
            Storyboard.TargetProperty="Angle"
            Source="Angle" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>

          <!-- Animates the rectangle horizotally along the path. -->
          <DoubleAnimationUsingPath
            Storyboard.TargetName="MyTranslateTransform"
            Storyboard.TargetProperty="X"
            Source="X" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>

          <!-- Animates the rectangle vertically along the path. -->
          <DoubleAnimationUsingPath
            Storyboard.TargetName="MyTranslateTransform"
            Storyboard.TargetProperty="Y"
            Source="Y" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>

MatrixAnimationUsingPathExample使用路徑的Matrix動畫效果

一、 MatrixAnimationUsingPath.DoesRotateWithTangent 屬性：獲取或設置一個值，該值指示對象是否沿路徑的切線旋轉。

1. 圖中並未設置Matrix動畫值，默認爲沿路徑平移
2. 當DoesRotateWithTangent=」True「時，矩形方框在平移時，會沿路徑的線的角度旋轉。

<!-- This button starts an animation that follows the tangent
of the path because DoesRotateWithTangent is set to "True".-->
<Button Width="300" HorizontalAlignment="Left" >
  Start Animation with DoesRotateWithTangent="True"

  <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animates the button along the path following the tangent of the path. -->
          <MatrixAnimationUsingPath
            Storyboard.TargetName="myMatrixTransform"
            Storyboard.TargetProperty="Matrix"
            DoesRotateWithTangent="True" 
            Duration="0:0:5" 
            RepeatBehavior="Forever" AutoReverse="True" >
            <MatrixAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </MatrixAnimationUsingPath.PathGeometry>
          </MatrixAnimationUsingPath>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>