WPF运行时MatrixAnimationUsingPath路径动画无法正常启动问题

问题核心原因 #

1. 动画启动逻辑错误：你将Storyboard的触发逻辑绑定到了Arrowhead的Loaded事件，而按钮点击时Arrowhead已经完成加载，该事件不会再次触发，因此动画从未被实际启动。
2. 路径坐标不匹配：你定义的Path_Room1设置了Stretch="Fill"，其Data属性保存的是原始路径坐标，和控件在界面上渲染后的实际坐标存在偏移，就算动画启动，箭头也可能移动到可视区域外，看起来像没动。

修复方案 #

• 移除不必要的Loaded事件绑定，按钮点击时直接启动Storyboard
• 每次启动新动画前先停止旧动画，避免冲突，适配多路径共用箭头的需求
• 可选：将Path_Room1的Stretch改为None，或者对动画路径做坐标转换匹配界面布局

修复后代码后置

private void BtnRoom1_Click(object sender, RoutedEventArgs e)
{
    // 先停止箭头之前的动画，避免多路径切换冲突
    Arrowhead.BeginAnimation(MatrixTransform.MatrixProperty, null);

    var pathdata = Path_Room1.Data;
    PathGeometry animationPath = PathGeometry.CreateFromGeometry(pathdata);
    // 如果需要适配Stretch=Fill的路径，可在这一步添加坐标转换逻辑
    animationPath.Freeze();

    MatrixAnimationUsingPath matrixAnimationUsingPath = new MatrixAnimationUsingPath
    {
        PathGeometry = animationPath,
        Duration = TimeSpan.FromSeconds(5),
        RepeatBehavior = RepeatBehavior.Forever,
        DoesRotateWithTangent = true
    };

    Storyboard.SetTarget(matrixAnimationUsingPath, Arrowhead);
    Storyboard.SetTargetProperty(matrixAnimationUsingPath, new PropertyPath("RenderTransform.Matrix"));

    Storyboard pathAnimationStoryboard = new Storyboard();
    pathAnimationStoryboard.Children.Add(matrixAnimationUsingPath);
    // 直接启动动画，不需要等待Loaded事件
    pathAnimationStoryboard.Begin(this);
}

可选XAML调整（路径Stretch改为None，匹配原始路径坐标）

<Path
    x:Name="Path_Room1"
    Width="68.729"
    Height="71.077"
    Data="M248.37977,129.8855 C248.37977,129.8855 248.37977,102.93943 248.37977,97.931796 248.37977,92.924162 253.51313,93.863426 263.68489,93.863426 273.85665,93.863426 274.63926,94.685097 274.63926,86.939011 274.63926,76.767263 274.63926,65.520282 274.63926,62.46878 274.63926,59.417279 277.53466,59.827827 280.50799,59.827827 283.48133,59.827827 316.10902,59.827827 316.10902,59.827827"
    Stretch="None"
    Stroke="Black" />
<Path
    x:Name="Arrowhead"
    Width="23"
    Height="19.5"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Data="M94,29 L117,39 95,49 99,38 z"
    Fill="#ff387cc0"
    Stretch="Fill">
    <Path.RenderTransform>
        <MatrixTransform />
    </Path.RenderTransform>
</Path>

如果需要保留Path的Stretch="Fill"属性，只需要在生成动画路径前，用Path_Room1的RenderTransform把原始路径坐标转换为界面实际渲染坐标即可。

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