Question

我正在尝试使用C＃代码和WPF为我的路径中的3个点制作动画。

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

现在的一个问题是，当我为这三个点中的第一个设置动画时，看起来它会画出一条直线。

这是指向它正在做的两种状态的链接：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类上有一个名为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中的路径中设置动画点

1 个答案: