[英]Can I animate the X- and Y- coordinates of a WPF Bezier curve control point separately?
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. 我正在尝试在WPF中创建动画的Bezier曲线,我打算通过平滑且缓慢地为端点和控制点设置动画来使它“活着”。 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. 通过使用两个不同的DoubleAnimation(例如分别对Canvas.Top和Canvas.Left进行动画处理),我在其他更简单的动画中也取得了成功。
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. 但是在Bezier片段中,控制点和端点以Point()实例的形式给出,我似乎无法弄清楚如何分别为这些Point实例的X和Y坐标设置动画。 Although there is a PropertyPath for (eg) BezierSegment.ControlPoint2, there doesn't seem to be one for that point's X coordinate.
尽管(例如)BezierSegment.ControlPoint2有一个PropertyPath,但该点的X坐标似乎没有一个。
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. 我已经看过通过继承PointAnimationBase来实现自己的自定义点动画,但是很难浏览文档以了解它们如何联系在一起-那里没有很多示例。
Is a custom animation inheriting from PointAnimationBase the correct way to go, and how do I tie it into the BezierSegment's control points? 从PointAnimationBase继承的自定义动画是否正确,我该如何将其绑定到BezierSegment的控制点? Or should I look at something completely different to achieve the effect?
还是应该看完全不同的东西才能达到效果?
A custom PointAnimation seems to be a sensible approach. 自定义PointAnimation似乎是一种明智的方法。
The following XAML shows how a standard PointAnimation animates the Point1
property of a QuadraticBezierSegment: 以下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>
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: 自定义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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.