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 (eg) 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?
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();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.