Question

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

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

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

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

Answer 1

我不太确定这是不是你想要的，但我会试一试。

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

Answer 2

我不会在评论中这么做，这是一篇很棒的帖子：

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

Answer 3

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

完整答案：

我首先在Path中绘制一个示例Grid以进行演示。将实际的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>

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

<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的属性，并且该属性是 animatable 。让我们在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));
    }
}

对于采样率不够高的动画，效果不佳，但是可以给您带来灵感！

为在画布上绘制的路径设置动画

3 个答案: