WPF 路径中的动画点

Question

我正在尝试使用 C# 代码和 WPF 为路径中的 3 个点设置动画。

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

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

这里是link它正在做的两个状态：http://imgur.com/a/mlYPs

当它使箭头动画指向左侧时，您会在顶部看到一条额外的线。

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#）。

谢谢！

Answer 1

经过一些调试后，我发现问题是我的路径中有一个额外的点。

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

要解决此问题，我必须使用 PathFigures StartPoint 作为我的第一个点：

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));

然后我用这三个点做动画。

WPF 路径中的动画点

Animating points in a path in WPF

c#

wpf

animation

point

path