WPF路径动画

特此声明：本文为CSDN博主「田野上的风筝」，原文地址：https://blog.csdn.net/weixin_43100896/article/details/87899883。感谢大佬的总结， 下文为转载内容。

在WPF中实现动画并不是什么困难的事，因为WPF提供了动画模型和强大的类库，其中WPF中的三种基本动画：线插性值动画、关键帧动画、路径动画，这三种动画都在system.Windows.Media.Animation这个命名空间。

路径动画：基于路径的动画，通过修改数值使其符合PathGeometry对象描述的形状，并让元素沿着路径进行移动从而达到动画效果。以下是三个路径动画类

MatrixAnimationUsingPath

这个是路径动画比较常用的一个类

例：首先绘制一个几何，再在Storyboard里使用DoubleAnimationUsingPath设置属性

Duration：动画持续时间

RepeatBehavior:动画的重复行为 值可以为Forever（永久），也可以根据需求设置动画的时间。

DoesRotateWithTangent：设置这个属性后可根据路径的坡度来移动

<Canvas>
            <Canvas.Resources>
                <!--绘制几何图形-->
                <PathGeometry x:Key="path">
                    <PathFigure StartPoint="40,40" IsClosed="True">
                        <LineSegment Point="40,130"></LineSegment>
                        <ArcSegment Point="60,150" Size="20,20" ></ArcSegment>
                        <LineSegment Point="200,150"></LineSegment>
                        <ArcSegment Point="220,130" Size="20,20"></ArcSegment>
                        <LineSegment Point="220,40"></LineSegment>
                        <ArcSegment Point="200,20" Size="20,20"></ArcSegment>
                        <LineSegment Point="60,20"></LineSegment>
                        <ArcSegment Point="40,40" Size="20,20"></ArcSegment>
                    </PathFigure>
                </PathGeometry>
                <Storyboard x:Key="pathStoryboard" >
                    <MatrixAnimationUsingPath PathGeometry="{StaticResource path}" Storyboard.TargetName="ButtonMatrixTransform"
                                          Storyboard.TargetProperty="Matrix"
                                          DoesRotateWithTangent="True"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                    </MatrixAnimationUsingPath>
                </Storyboard>
            </Canvas.Resources>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Control.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
                </EventTrigger>
            </Canvas.Triggers>
            <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
            <Ellipse Fill="#eee" Width="20" Height="20" >
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="ButtonMatrixTransform" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>

定义好Storyboard后通过触发器来触发动画。

DoubleAnimationUsingPath

通过控制对象的MatrixTransform （X、Y和Angle）实现路径变化达到动画效果。

<Canvas  Grid.Row="2">
            <Canvas.Resources>
                <PathGeometry x:Key="path">
                    <PathFigure StartPoint="40,40" IsClosed="True">
                        <LineSegment Point="40,130"></LineSegment>
                        <ArcSegment Point="60,150" Size="20,20" ></ArcSegment>
                        <LineSegment Point="200,150"></LineSegment>
                        <ArcSegment Point="220,130" Size="20,20"></ArcSegment>
                        <LineSegment Point="220,40"></LineSegment>
                        <ArcSegment Point="200,20" Size="20,20"></ArcSegment>
                        <LineSegment Point="60,20"></LineSegment>
                        <ArcSegment Point="40,40" Size="20,20"></ArcSegment>
                    </PathFigure>
                </PathGeometry>
                <Storyboard x:Key="pathStoryboard" >
                    <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="translateTransform"
                                          Storyboard.TargetProperty="X"
                                          Source="X"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                    </DoubleAnimationUsingPath>
                    <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="translateTransform"
                                          Storyboard.TargetProperty="Y"
                                          Source="Y"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                    </DoubleAnimationUsingPath>
                </Storyboard>
            </Canvas.Resources>
 
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Control.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
                </EventTrigger>
            </Canvas.Triggers>
 
            <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
 
            <Path Fill="#eee">
                <Path.Data>
                    <EllipseGeometry x:Name="ellipses" Center="5,5" RadiusX="12" RadiusY="12"/>
                </Path.Data>
                <Path.RenderTransform>
                    <TranslateTransform x:Name="translateTransform" />
                </Path.RenderTransform>
            </Path>
        </Canvas>

PointAnimationUsingPath 靠中心点确定位置的形状

 <Canvas Grid.Row="1" >
            <Canvas.Resources>
                <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                <Storyboard x:Key="pathStoryboard" >
                    <PointAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="ellipse"
                                          Storyboard.TargetProperty="Center"
                                          Duration="0:0:5" RepeatBehavior="0:0:8" >
                    </PointAnimationUsingPath>
                </Storyboard>
            </Canvas.Resources>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Control.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
                </EventTrigger>
            </Canvas.Triggers>
 
            <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
            <Path Fill="#eee">
                <Path.Data>
                    <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
                </Path.Data>
            </Path>
        </Canvas>