像在画布上绘制一样为路径设置动画答案

【问题标题】：Animate a path like it's drawn on a canvas像在画布上绘制一样为路径设置动画
【发布时间】：2020-11-02 23:41:36
【问题描述】：

我是 WPF 的新手，请指导我解决这个问题的正确方向。

我已经构建了一个 WPF 应用程序，其中包含路线图视图控件的所有功能。 IE。路线图可以放大/缩小，使用鼠标、键盘和提供的控件向各个方向平移。我已将道路映射为使用 Expression Blend 绘制的路径。

目前我正在寻找一种方法来为选定的道路设置动画，就好像它是用铅笔/钢笔/记号笔绘制的一样。这可能吗？到目前为止，我已经能够为路径的不透明度和颜色设置动画。我已经搜索了很多这个功能，但没有运气。可能是我没有搜索正确的术语。我希望你们中的某个人能对这件事有所了解。

提前致谢。对不起，如果我听起来很疯狂 :) 编程是我疯狂的方式 :D

【问题讨论】：

我不太明白，您是否能够为不透明度和颜色设置动画？如果是的话，你也应该很容易制作动画，例如StrokeThickness。
我已经为不透明度和颜色设置了动画。动画 StrokeThickness 也不是问题，尽管它不是我需要的。想象有两个点连接在一条复杂的线上（曲线+直线）。现在想象那条路径是不可见的，而你正在用铅笔画出那条路径。我想达到这个效果。我帮助你理解了吗？
并非如此。你不是已经用特定的笔（由描边属性定义）绘制路径（具有任意复杂的几何形状）吗？
我有路径数据。我不是在绘制路径，只是指定路径数据只会在没有动画的情况下渲染它。我想在渲染时动画这条路径点对点。因此，用户会看到它就像在给定的持续时间内从 A 点绘制到 B 点一样。我无法解释更简单的:(
@both：我明白了 :) 但我没有解决方案。刚刚测试了一些混合的东西，但它似乎没有开箱即用的功能。但这里有一个类似的问题，也许这可以帮助：stackoverflow.com/questions/1876806/animate-a-path

标签： wpf animation path draw

【解决方案1】：

我不太确定这是否是您正在寻找的，但我会试一试。

动画会有点复杂。它实际上是一系列动画，路径中的每个点减去第一个点。您可能希望从源路径一次添加一个点到动画路径。每次添加一个点时，该点都会从前一个点开始，然后移动到所需的点。动画将随着时间的推移移动新添加的点，从而产生“绘制”该段的效果。当该动画完成时，您将迭代到下一个点并开始下一个动画。

【讨论】：

【解决方案2】：

我不会在 cmets 中，这是一个很棒的帖子：

http://social.msdn.microsoft.com/Forums/en/wpf/thread/19a7bd4b-cf28-4b31-a329-a5f58b9ec374

以下是 Charles Petzold 对这个问题的看法：

http://www.charlespetzold.com/blog/2006/08/150351.html

【讨论】：

【解决方案3】：

TL;DR：我们利用PointAnimationUsingPath。我们沿路径为一个点设置动画，并在该点移动时构建一个Clip 几何体。

完整答案：

我首先在Grid 中绘制样本Path 以进行演示。将实际的Path 数据放入资源中，因为我们稍后会重复使用它。

<Grid>
    <Grid.Resources>
        <PathGeometry x:Key="path">
            <PathFigure>
                <BezierSegment Point1="10 30" Point2="100 100" Point3="200 10" />
            </PathFigure>
        </PathGeometry>
    </Grid.Resources>
    <Path x:Name="myPath" StrokeThickness="5" Stroke="Black" Data="{StaticResource path}" />
</Grid>

然后我为Path 定义一个空的Clip 几何：

<Path.Clip>
    <GeometryGroup x:Name="geometryGroup" FillRule="Nonzero"/>
</Path.Clip>

到目前为止，Path 消失了，因为它被裁剪为一个空的几何图形。我们剩下要做的就是在这个剪裁几何中逐渐添加点以显示Path。为此，我们需要一个动画对象。我建议为演示创建一个FrameworkPoint：

public class FrameworkPoint : FrameworkElement {
    public static DependencyProperty CenterProperty = DependencyProperty.RegisterAttached("Center", typeof(Point), typeof(FrameworkPoint));
    public Point Center { get => (Point)GetValue(CenterProperty); set => SetValue(CenterProperty, value); }

    public event Action<Point> CoordinatesChanged;

    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e) {
        base.OnPropertyChanged(e);
        if (e.Property == CenterProperty) {
            CoordinatesChanged?.Invoke(Center);
        }
    }
}

这是一个只有一个Point 类型属性的对象，并且该属性是可动画的。让我们在Grid 中添加我们的（不可见的）点并在我们的Path 上对其进行动画处理：

<local:FrameworkPoint x:Name="myPoint">
    <local:FrameworkPoint.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <PointAnimationUsingPath Duration="00:00:10"
                                             Storyboard.TargetProperty="Center"
                                             PathGeometry="{StaticResource path}"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </local:FrameworkPoint.Triggers>
</local:FrameworkPoint>

在启动时，FrameworkPoint 将在指定的时间（10 秒）内不可见地跟随Path。剩下要做的就是随着点的移动构建我们的Clip：

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        myPoint.CoordinatesChanged += MyPoint_CoordinatesChanged;
    }

    private void MyPoint_CoordinatesChanged(Point obj) {
        geometryGroup.Children.Add(new EllipseGeometry(obj, 5, 5));
    }
}

这不会为快速动画提供完美的结果，因为采样不够好，但它可以给你一些想法！

【讨论】：