要实现箭头沿路径移动并留下均匀间距副本的效果，核心思路是生成多个箭头元素，让每个箭头在路径的不同进度位置同步移动，保持固定间距。下面提供两种原生WPF的实现方案，不需要额外依赖库：

方案一：后台代码批量生成箭头并绑定动画 #

这种方式灵活性高，适合动态调整箭头数量或路径的场景。

步骤1：定义路径和箭头样式 #

先把导航路径和箭头样式放到资源里，方便复用：

<Window x:Class="WpfArrowTrajectory.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Arrow Trajectory" Height="450" Width="500" Loaded="Window_Loaded">
    <Window.Resources>
        <!-- 导航路径 -->
        <PathGeometry x:Key="NavigationPath" Figures="M277,66 C277,66 427,87 447,153 466,219 396,241 397,297 399,352 439,376 439,376" />
        
        <!-- 箭头样式 -->
        <Style x:Key="ArrowStyle" TargetType="Path">
            <Setter Property="Width" Value="23"/>
            <Setter Property="Height" Value="19.5"/>
            <Setter Property="Data" Value="M94,29 L117,39 95,49 99,38 z"/>
            <Setter Property="Fill" Value="#ff387cc0"/>
            <Setter Property="Stretch" Value="Fill"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> <!-- 让箭头中心对齐路径点 -->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <MatrixTransform/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <!-- 显示导航路径 -->
        <Path x:Name="SuperPath" Stroke="Black" Data="{StaticResource NavigationPath}" />
    </Grid>
</Window>

步骤2：后台生成箭头并添加动画 #

在窗口的Loaded事件中，批量创建箭头，给每个箭头分配不同的动画起始进度，确保它们均匀分布在路径上：

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace WpfArrowTrajectory
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var pathGeometry = (PathGeometry)Resources["NavigationPath"];
            int arrowCount = 30; // 轨迹上的箭头数量
            double animationDuration = 3; // 单个箭头走完路径的时间（秒）

            for (int i = 0; i < arrowCount; i++)
            {
                // 创建箭头元素
                var arrow = new Path { Style = (Style)Resources["ArrowStyle"] };
                ((Grid)SuperPath.Parent).Children.Add(arrow);

                // 计算当前箭头的初始进度（均匀分布）
                double startProgress = (double)i / arrowCount;
                // 动画结束进度：超过路径终点，循环后可以无缝衔接
                double endProgress = 1 + startProgress;

                // 创建路径矩阵动画，自动处理位置和旋转
                var matrixAnimation = new MatrixAnimationUsingPath
                {
                    PathGeometry = pathGeometry,
                    DoesRotateWithTangent = true, // 让箭头沿路径切线方向旋转
                    Duration = TimeSpan.FromSeconds(animationDuration),
                    RepeatBehavior = RepeatBehavior.Forever,
                    From = pathGeometry.GetMatrixAtFractionLength(startProgress),
                    To = pathGeometry.GetMatrixAtFractionLength(endProgress)
                };

                // 绑定动画到箭头的MatrixTransform
                Storyboard.SetTarget(matrixAnimation, arrow);
                Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath("RenderTransform.Matrix"));

                // 启动动画
                var storyboard = new Storyboard();
                storyboard.Children.Add(matrixAnimation);
                storyboard.Begin();
            }
        }
    }
}

方案二：用ItemsControl绑定数据（MVVM友好） #

如果你的项目遵循MVVM模式，可以用ItemsControl来承载箭头，通过数据绑定控制每个箭头的位置和旋转：

步骤1：XAML结构 #

<Grid>
    <Path x:Name="SuperPath" Stroke="Black" Data="{StaticResource NavigationPath}" />
    <ItemsControl x:Name="ArrowContainer">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas /> <!-- 用Canvas精准定位箭头 -->
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Path Width="23" Height="19.5" Data="M94,29 L117,39 95,49 99,38 z" Fill="#ff387cc0" Stretch="Fill">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform X="-11.5" Y="-9.75" /> <!-- 偏移到中心对齐 -->
                            <RotateTransform Angle="{Binding Rotation}" />
                            <TranslateTransform X="{Binding Position.X}" Y="{Binding Position.Y}" />
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

步骤2：后台数据生成与动画逻辑 #

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    var pathGeometry = (PathGeometry)Resources["NavigationPath"];
    int arrowCount = 30;
    double duration = 3;
    var arrowDataList = new List<ArrowData>();

    // 初始化箭头数据
    for (int i = 0; i < arrowCount; i++)
    {
        double progress = (double)i / arrowCount;
        if (pathGeometry.GetPointAtFractionLength(progress, out Point point, out Vector tangent))
        {
            double angle = Math.Atan2(tangent.Y, tangent.X) * 180 / Math.PI;
            arrowDataList.Add(new ArrowData { Position = point, Rotation = angle });
        }
    }
    ArrowContainer.ItemsSource = arrowDataList;

    // 创建整体动画，更新每个箭头的位置和旋转
    var storyboard = new Storyboard();
    var progressAnimation = new DoubleAnimation
    {
        From = 0,
        To = 1,
        Duration = TimeSpan.FromSeconds(duration),
        RepeatBehavior = RepeatBehavior.Forever
    };

    progressAnimation.CurrentTimeInvalidated += (s, args) =>
    {
        var anim = s as DoubleAnimation;
        if (anim == null) return;

        double baseProgress = anim.CurrentValue.Value;
        for (int i = 0; i < arrowCount; i++)
        {
            double currentProgress = (baseProgress + (double)i / arrowCount) % 1;
            if (pathGeometry.GetPointAtFractionLength(currentProgress, out Point point, out Vector tangent))
            {
                var data = arrowDataList[i];
                data.Position = point;
                data.Rotation = Math.Atan2(tangent.Y, tangent.X) * 180 / Math.PI;
            }
        }
    };

    storyboard.Children.Add(progressAnimation);
    storyboard.Begin();
}

// 实现INotifyPropertyChanged让绑定生效
public class ArrowData : System.ComponentModel.INotifyPropertyChanged
{
    private Point _position;
    public Point Position
    {
        get => _position;
        set { _position = value; OnPropertyChanged(nameof(Position)); }
    }

    private double _rotation;
    public double Rotation
    {
        get => _rotation;
        set { _rotation = value; OnPropertyChanged(nameof(Rotation)); }
    }

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName) => PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(propName));
}

关键说明 #

• 均匀间距实现：通过给每个箭头分配i/arrowCount的初始进度，确保它们在路径上均匀分布；
• 旋转对齐：利用MatrixAnimationUsingPath的DoesRotateWithTangent属性，或手动计算切线向量的角度，让箭头始终朝向路径前进方向；
• 循环动画：将动画结束进度设为1+初始进度，或对进度取模1，实现无缝循环。

内容的提问来源于stack exchange，提问作者Luiey