在WPF中的路径动画点

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

然后我使用这三点来制作动画。