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 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 中制作线条/贝塞尔点动画的经验吗？

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”的不可变实例。

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 应该可以解决问题。

编辑：看起来持续时间默认设置为自动，我会看看我还能想出什么，请耐心等待..:)