在 WPF 中对路径中的点进行动画处理

本文关键字：动画 处理 WPF 路径 | 更新日期: 2023-09-27 18:30:43

我正在尝试使用 C# 代码和 WPF 对路径中的 3 个点进行动画处理。

我很接近，虽然我觉得代码很乱。

现在的一个问题是，当我对三个点中的第一个点进行动画处理时，它看起来像是在它行进的地方画了一条线。

这是它正在做的事情的两种状态的链接：https://i.stack.imgur.com/QWXuz.jpg

当它以动画形式显示箭头指向左侧方向时，您会在顶部看到一条额外的线。

public class SlideOutButton : ContentControl
{
    Path _arrowPath;
    PathSegmentCollection _pathSegments;
    public SlideOutButton(double strokeThickness = 1.0d)
    {
        _arrowPath = new Path();
        PathGeometry pathGeo = new PathGeometry();
        PathFigure figure = new PathFigure();
        _pathSegments = new PathSegmentCollection();
        _pathSegments.Add(new LineSegment(new Point(0, 0), true));
        _pathSegments.Add(new LineSegment(new Point(2, 3), true));
        _pathSegments.Add(new LineSegment(new Point(0, 6), true));
        figure.Segments = _pathSegments;
        pathGeo.Figures.Add(figure);
        _arrowPath.Data = pathGeo;
        _arrowPath.Stroke = Brushes.Black;
        _arrowPath.StrokeThickness = strokeThickness;
        _arrowPath.Stretch = Stretch.Uniform;
        this.Content = _arrowPath;
        this.PreviewMouseLeftButtonUp += SlideOutButton_MouseLeftButtonUp;
    }
    private void SlideOutButton_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        PointAnimation pointAnim = new PointAnimation();
        pointAnim.From = new Point(0, 0);
        pointAnim.To = new Point(2, 0);
        Point point = (_pathSegments.ElementAt(0) as LineSegment).Point;
        LineSegment segment = (_pathSegments.ElementAt(0) as LineSegment);
        segment.BeginAnimation(LineSegment.PointProperty, pointAnim);
        PointAnimation pointAnim2 = new PointAnimation();
        pointAnim2.From = new Point(2, 3);
        pointAnim2.To = new Point(0, 3);
        Point point2 = (_pathSegments.ElementAt(1) as LineSegment).Point;
        LineSegment segment2 = (_pathSegments.ElementAt(1) as LineSegment);
        segment2.BeginAnimation(LineSegment.PointProperty, pointAnim2);
        PointAnimation pointAnim3 = new PointAnimation();
        pointAnim3.From = new Point(0, 6);
        pointAnim3.To = new Point(2, 6);
        Point point3 = (_pathSegments.ElementAt(2) as LineSegment).Point;
        LineSegment segment3 = (_pathSegments.ElementAt(2) as LineSegment);
        segment3.BeginAnimation(LineSegment.PointProperty, pointAnim3);
    }
    private PathGeometry _CreatePathGeo(bool left = false)
    {
        PathGeometry pathGeo = new PathGeometry();
        PathFigure figure = new PathFigure();
        PathSegmentCollection pathSegments = new PathSegmentCollection();
        pathSegments.Clear();
        if (!left)
        {
            pathSegments.Add(new LineSegment(new Point(0, 0), true));
            pathSegments.Add(new LineSegment(new Point(2, 3), true));
            pathSegments.Add(new LineSegment(new Point(0, 6), true));
        }
        else
        {
            pathSegments.Add(new LineSegment(new Point(2, 0), true));
            pathSegments.Add(new LineSegment(new Point(0, 3), true));
            pathSegments.Add(new LineSegment(new Point(2, 6), true));
        }
        figure.Segments = pathSegments;
        pathGeo.Figures.Add(figure);
        return pathGeo;
    }
}

另外，如果您能想到一种更简单的方法来创建此动画，请告诉我。（仅使用 C#）。

谢谢！

在 WPF 中对路径中的点进行动画处理

在进行了一些调试后，我发现问题是我的路径中有一个额外的点。

PathFigure 类上有一个名为 StartPoint 的属性。当我创建我的路径时，我总共有 4 分，包括起点。

为了解决这个问题，我必须使用PathFigures起点作为我的第一点：

Point starPoint = (_arrowPath.Data as PathGeometry).Figures[0].StartPoint;

然后我只添加两个线段作为接下来的两个点：

_pathSegments.Add(new LineSegment(new Point(2, 3), true));
_pathSegments.Add(new LineSegment(new Point(0, 6), true));

然后，我使用这三个点进行动画制作。

相关文章：