我可以分別為WPF Bezier曲線控制點的X和Y坐標設置動畫嗎？

Question

我正在嘗試在WPF中創建動畫的Bezier曲線，我打算通過平滑且緩慢地為端點和控制點設置動畫來使它“活着”。 我不希望任何點都遵循明顯的可預測路徑，例如簡單的橢圓或圓形。

通過使用兩個不同的DoubleAnimation（例如分別對Canvas.Top和Canvas.Left進行動畫處理），我在其他更簡單的動畫中也取得了成功。

但是在Bezier片段中，控制點和端點以Point（）實例的形式給出，我似乎無法弄清楚如何分別為這些Point實例的X和Y坐標設置動畫。 盡管（例如）BezierSegment.ControlPoint2有一個PropertyPath，但該點的X坐標似乎沒有一個。

我已經看過通過繼承PointAnimationBase來實現自己的自定義點動畫，但是很難瀏覽文檔以了解它們如何聯系在一起-那里沒有很多示例。

從PointAnimationBase繼承的自定義動畫是否正確，我該如何將其綁定到BezierSegment的控制點？ 還是應該看完全不同的東西才能達到效果？

Answer 1

自定義PointAnimation似乎是一種明智的方法。

以下XAML顯示了標准PointAnimation如何動畫化QuadraticBezierSegment的Point1屬性：

<Path Stroke="Black" StrokeThickness="3">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="100,200">
                    <PathFigure.Segments>
                        <QuadraticBezierSegment Point2="200,200"/>
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
    <Path.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <PointAnimation
                        Storyboard.TargetProperty="Data.Figures[0].Segments[0].Point1"
                        From="150,200" To="150,0" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
</Path>

自定義PointAnimation將要求您實現GetCurrentValueCore方法並返回一個點實例，該實例表示動畫的當前值，具體取決於animationClock參數提供的當前時間：

public class MyPointAnimation : PointAnimationBase
{
    protected override Point GetCurrentValueCore(
        Point defaultOriginValue, Point defaultDestinationValue,
        AnimationClock animationClock)
    {
        double x = ... // as function of animationClock
        double y = ... // as function of animationClock
        return new Point(x, y);
    }

    protected override Freezable CreateInstanceCore()
    {
        return new MyPointAnimation();
    }
}