WPF动画 - 动画贝塞尔曲线点

Question

我正在进行一个涉及在两个对象之间绘制曲线路径的项目。目前，我已经编写了一些测试代码来玩弄贝塞尔曲线和动画效果。第一个测试只是将端点（Point3）从原始对象（矩形）移动到目标对象（另一个矩形），沿直线运动。以下是设置实际线条的代码：

        connector = new Path();
        connector.Stroke = Brushes.Red;
        connector.StrokeThickness = 3;

        PathGeometry connectorGeometry = new PathGeometry();
        PathFigure connectorPoints = new PathFigure();
        connectorCurve = new BezierSegment();

        connectorPoints.StartPoint = new Point((double)_rect1.GetValue(Canvas.LeftProperty) + _rect1.Width / 2,
            (double)_rect1.GetValue(Canvas.TopProperty) + _rect1.Height / 2);
        connectorCurve.Point1 = connectorPoints.StartPoint;
        connectorCurve.Point2 = connectorPoints.StartPoint;
        connectorCurve.Point3 = connectorPoints.StartPoint;

        connectorPoints.Segments.Add(connectorCurve);
        connectorGeometry.Figures.Add(connectorPoints);
        connector.Data = connectorGeometry;
        MainCanvas.Children.Add(connector);

好的，现在我们把一条线缩成了一个点。现在，让我们来动画化这条线，从 _rect1 到 _rect2（即两个端点的对象）:

        PointAnimation pointAnim = new PointAnimation();
        pointAnim.From = connectorCurve.Point3;
        pointAnim.To = new Point((double)_rect2.GetValue(Canvas.LeftProperty) + _rect2.Width / 2,
            (double)_rect2.GetValue(Canvas.TopProperty) + _rect2.Height / 2);
        pointAnim.Duration = new Duration(TimeSpan.FromSeconds(5));
        board.Children.Add(pointAnim);

非常好。但是，当我尝试使用Storyboard时，却什么也没有显示出来。以下是Storyboard的代码：

        Storyboard board = new Storyboard();
        PointAnimation pointAnim = new PointAnimation();
        pointAnim.From = connectorCurve.Point3;
        pointAnim.To = new Point((double)_rect2.GetValue(Canvas.LeftProperty) + _rect2.Width / 2,
            (double)_rect2.GetValue(Canvas.TopProperty) + _rect2.Height / 2);
        pointAnim.Duration = new Duration(TimeSpan.FromSeconds(5));

        Storyboard.SetTarget(pointAnim, connectorCurve);
        Storyboard.SetTargetProperty(pointAnim, new PropertyPath(BezierSegment.Point3Property));
        board.Children.Add(pointAnim);
        board.Begin();

没有任何动静。我怀疑我输入SetTarget或SetTargetProperty的内容有问题，但是似乎无法找出原因。有没有人有在WPF中动画化线条/贝塞尔曲线点的经验？

- user133856

---

我不确定这会解决你的问题，但你可以在这篇文章中找到一些灵感：http://www.japf.fr/?p=227 - Thomas Levesque

Answer 1

我重新创建了您的代码，现在它可以正常工作：

Storyboard.SetTarget(pointAnim, connector);
Storyboard.SetTargetProperty(pointAnim, new PropertyPath("Data.Figures[0].Segments[0].Point3"));

搞定了 :) 看起来目标应该是控件本身。

像这样向下一步：

Storyboard.SetTarget(pointAnim, connectorGeometry);
Storyboard.SetTargetProperty(pointAnim, new PropertyPath("Figures[0].Segments[0].Point3"));

...抛出了InvalidOperationException异常：

路径“Figures [0]。Segments [0]。Point3”中的属性值“[Unknown]”指向不可变实例“System.Windows.Media.PathFigure”。

- Kieren Johnstone

Answer 2

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard(VS.95).aspx中提到：

不要在页面的构造函数中尝试调用Storyboard成员（例如Begin）。这将导致动画无声地失败。

如果您正在做这件事，那么请注意！

该页面上的示例还设置了Storyboard对象的Duration属性。

最后一个通用提示是，在处理这些UI对象和奇怪的XAML对象图形时，一旦您掌握了基础知识，最好将其放入ResourceDictionary中，并使用类似“Resources [“Name”] as Storyboard”的东西稍后再次获取它。

希望这有所帮助：看起来缺少的Duration应该解决问题。

编辑：看起来默认情况下Duration设置为自动，我会看看还能想出什么，敬请耐心等待.. :)

- Kieren Johnstone