wpf 路径动画 举例

先，我们需要在XAML中定义一个Path，这个Path将定义动画的路线。然后，我们将使用DoubleAnimationUsingPath来沿着这个路径移动一个元素（比如一个矩形）。

<Window x:Class="WpfApp.MainWindow"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Title="Path Animation Example" Height="350" Width="525">  <Grid>  <Canvas Name="myCanvas">  <!-- 定义路径 -->  <Path x:Name="myPath" Stroke="Black" StrokeThickness="2" Data="M 10,100 C 100,10 200,200 300,100"/><!-- 定义一个矩形，我们将对其进行动画处理 -->  <Rectangle Name="myRectangle" Width="20" Height="20" Fill="Red" Canvas.Left="10" Canvas.Top="100">  <Rectangle.RenderTransform>  <TranslateTransform x:Name="rectTransform" X="0" Y="0"/>  </Rectangle.RenderTransform>  <!-- 定义动画 -->  <Rectangle.Triggers>  <EventTrigger RoutedEvent="Loaded">  <BeginStoryboard>  <Storyboard>  <!-- 路径动画 -->  <DoubleAnimationUsingPath  Storyboard.TargetName="rectTransform"  Storyboard.TargetProperty="Y"  PathGeometry="{Binding Data, ElementName=myPath}"  Duration="0:0:5"  RepeatBehavior="Forever"  AutoReverse="True"/>  </Storyboard>  </BeginStoryboard>  </EventTrigger>  </Rectangle.Triggers>  </Rectangle>  <!-- 注意：为了简化示例，我没有直接在XAML中给Path命名，但在实际使用中你可能需要这样做来绑定 -->  <!-- <Path x:Name="myPath" Stroke="Black" StrokeThickness="2" Data="M 10,100 C 100,10 200,200 300,100"/> -->  </Canvas>  </Grid>  
</Window>

1. 在代码后台（MainWindow.xaml.cs）中，设置动画并绑定到Path的Data。

   public MainWindow()  
   {  InitializeComponent();  DoubleAnimationUsingPath pathAnimation = new DoubleAnimationUsingPath  {  Duration = TimeSpan.FromSeconds(5),  RepeatBehavior = RepeatBehavior.Forever,  AutoReverse = true,  PathGeometry = myPath.Data.GetFlattenedPathGeometry()  };  Storyboard.SetTargetName(pathAnimation, "rectTransform");  Storyboard.SetTargetProperty(pathAnimation, new PropertyPath("Y"));