WPF路径动画

WPF路径动画

前台代码

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  WindowTitle="PointAnimationUsingPath Example"
  Background="{StaticResource MyGridBrushResource}">


  <DockPanel Margin="20">
      <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="2"
        Margin="0,0,0,20" Padding="20" DockPanel.Dock="Top">
        <TextBlock Width="750">
          This example animates an object (rectangle) across the screen along a path. To do this, the Center property value is animated along a PathGeometry
          using PointAnimationUsingPath. The PointAnimationUsingPath object is needed because the Center property uses a point value.
        </TextBlock>
      </Border>

    <StackPanel DockPanel.Dock="Left">
    <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>
      

    <!-- 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>
    
    <!-- Displays functional code for demonstration. -->
    <Border Background="#EEEEEE" BorderBrush="Black" BorderThickness="1">
      <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
      <TextBlock Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
      ...
      &lt;Path Margin="15,15,15,15"&gt;
        &lt;Path.Data>
        
          &lt;!-- Describes an ellipse. --&gt;
          &lt;EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
             Center="10,100" RadiusX="15" RadiusY="15" /&gt;
        &lt;/Path.Data&gt;
      &lt;/Path&gt;
      ...
      &lt;Storyboard&gt;
      
        &lt;!-- Animates the ellipse along the path. --&gt;
        <Bold>&lt;PointAnimationUsingPath
           Storyboard.TargetName="MyAnimatedEllipseGeometry"
           Storyboard.TargetProperty="Center"
           Duration="0:0:5" 
           RepeatBehavior="Forever" AutoReverse="True" &gt;
             &lt;PointAnimationUsingPath.PathGeometry&gt;
               &lt;PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /&gt;
             &lt;/PointAnimationUsingPath.PathGeometry&gt;
         &lt;/PointAnimationUsingPath></Bold>
      &lt;/Storyboard&gt;
      ...
      </TextBlock>
      </ScrollViewer>
    </Border>
    <!-- End of code display. -->

</DockPanel>
</Page>