Can I animate the X- and Y- coordinates of a WPF Bezier curve control point separately?

Question

I am attempting to create an animated Bezier curve in WPF, which I intend to make "living" by smoothly and slowly animating end points and control points. I do not want any of the points to follow an obviously predictable path like a simple ellipse or circle.

I have had success in other simpler animations by using two different DoubleAnimations, animating for example Canvas.Top and Canvas.Left separately.

But in a Bezier segment, the control and end points are given as Point() instances, and I cannot seem to figure out how to animate these Point instances' X- and Y coordinates separately. Although there is a PropertyPath for (e.g.) BezierSegment.ControlPoint2, there doesn't seem to be one for that point's X coordinate.

I've looked at implementing my own custom point animation by inheriting from PointAnimationBase, but it is difficult navigating the documentation to understand how it all ties together - and there aren't very many examples out there.

Is a custom animation inheriting from PointAnimationBase the correct way to go, and how do I tie it into the BezierSegment's control points? Or should I look at something completely different to achieve the effect?

Clemens Clemens · Accepted Answer · 2015-03-15T13:14:05

A custom PointAnimation seems to be a sensible approach.

The following XAML shows how a standard PointAnimation animates the Point1 property of a QuadraticBezierSegment:

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

A custom PointAnimation would require you to implement the GetCurrentValueCore method and return a Point instance that represents the current value of the animation, depending on the current time provided by the animationClock parameter:

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

Can I animate the X- and Y- coordinates of a WPF Bezier curve control point separately?

1 Answers