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"));