WPF动画-物体跟随轨迹进行运动

 主要用到：RenderTransformOrigin  MatrixTransform   MatrixAnimationUsingPath  DoesRotateWithTangent

直接上代码

<Grid.Resources>
    <PathGeometry x:Key="PATH" Figures="M0,0 C9.3627259,14.084199 11.524114,20.690514 35.333333,23.666667 45.37791,24.922239 52.798515,21.97157 63,21 77.637055,19.605995 85.241514,18.171211 99.333333,26 108.91683,31.324163 110.48013,35.960258 115.33333,45.666667 119.0979,53.195802 119.89664,55.842377 130.33333,57.333333 139.87989,58.697126 150.54551,61.227243 160.33333,56.333333 180.98628,46.006858 175.62977,25.876591 204,35.333333 225.33093,42.443644 220.82385,51.414336 234.66667,68.333333 240.02228,74.87908 248.22642,70.218666 258.33333,61.666667 264.0656,56.816291 265.78799,48.584215 269.33333,42"/>
</Grid.Resources>
<Grid Grid.Column="1">
    
    <Canvas>
        <Path Panel.ZIndex="2" Canvas.Left="10" Canvas.Top="10" Stroke="Yellow" Data="{StaticResource PATH}"/>
        <!--定义贝塞尔曲线路径--> 
        <Path x:Name="path" Stroke="Black" StrokeThickness="2" Data="M 10,100 C 100,10 200,200 300,100" />

         <!--定义表示灯光的小圆--> 
        <Path Fill="Brown" Opacity="0.3">
            <Path.Data>
                <GeometryGroup FillRule="EvenOdd">
                    <EllipseGeometry Center="0,0" x:Name="ellipse" RadiusX="30" RadiusY="30"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <Button x:Name="light" Width="20" Height="20"  RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <MatrixTransform />
            </Button.RenderTransform>
            <!--定义动画-->
            <Button.Triggers>

                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <!--沿路径移动动画-->
                            <MatrixAnimationUsingPath
                                Storyboard.TargetProperty="RenderTransform.Matrix"
                                Duration="0:0:5"
                                RepeatBehavior="Forever"
                                AutoReverse="False"
                                 DoesRotateWithTangent="True"
                                PathGeometry="{StaticResource PATH}">

                            </MatrixAnimationUsingPath>
                            <PointAnimationUsingPath
                                 Storyboard.TargetName="ellipse"
                                 Storyboard.TargetProperty="Center"
                                 Duration="0:0:5"
                                 RepeatBehavior="Forever"
                                 AutoReverse="True">
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M 10,100 C 100,10 200,200 300,100"/>
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

   

     

    </Canvas>

</Grid>