xaml
<Canvas>
<Canvas.Resources>
<!-- 1. 定义移动的路径, 这里画了一个五角形 -->
<PathGeometry x:Key="MovePathGeometry" Figures="M 175,30 L 213.88,123.63 L 320.23,129.35 L 242.5,198.04 L 268.75,301.37 L 175,240 L 81.25,301.37 L 107.5,198.04 L 29.77,129.35 L 136.12,123.63 Z" />
</Canvas.Resources>
<ctrlHelpers:GridLineControl />
<!-- 2. 运行三角形 -->
<Path
Width="24" Height="24"
Data="M 0,0 L 24,12 L 0,24 Z" Fill="Crimson" RenderTransformOrigin=".5 .5">
<Path.RenderTransform>
<MatrixTransform />
</Path.RenderTransform>
<Path.Triggers>
<!-- 3. 在 loaded 时启动动画 -->
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<!-- 4. 设置跟随路径动画 -->
<!-- PathGeometry 指定路径, RenderTransformOrigin 指定了跟随路径的中心点 -->
<!-- DoesRotateWithTangent 指定方向跟随路径旋转 -->
<MatrixAnimationUsingPath
DoesRotateWithTangent="True"
PathGeometry="{StaticResource MovePathGeometry}"
RepeatBehavior="Forever"
Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)" Duration="0:0:8" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<!-- 5. 为了方面观察, 绘制出了路径, width, height 无关紧要 -->
<!-- 因为运动三角形是中心跟随路径,所以绘制出的路径要再偏移至运行的三角形的中心 left/top = 12 -->
<Path
Canvas.Left="12" Canvas.Top="12"
Width="350" Height="350"
Data="{StaticResource MovePathGeometry}"
Opacity=".5" Stroke="DodgerBlue" StrokeThickness="2" />
</Canvas>