纯 XAML 代码的 WPF 动画贝塞尔曲线

前言

可以使用 BezierSegment 对象创建贝塞尔曲线。请注意，贝塞尔曲线由四个点定义：一个起始点、一个终点和两个控制点。BezierSegment 类不包含曲线起始点的属性，它仅定义终点。曲线的起始点是添加 BezierSegment 的 PathFigure 的当前点。请注意，PathFigure 是使用由多个段组成的不间断线条绘制的形状。有几种类型的段，它们都源自 PathSegment 类。

如果我们把直线段想象成具有弹性，那么两个控制点将从两侧推动这个直线段，形成贝塞尔曲线。第一个控制点影响曲线的起始部分，而第二个控制点影响曲线的结束部分。曲线不一定通过这两个控制点，每个控制点将它所控制的线条部分向自身移动，而不是穿过自身。以下示例完全通过 XAML 实现，不使用代码后台文件。它显示了一个贝塞尔曲线，其两个控制点被动画化。第一个控制点的 X 坐标和第二个控制点的 Y 坐标在 [50, 250] 范围内变化。

请注意下方的图片。第一张图片描绘了直线，后一张图片描绘了通过 Microsoft Expression Blend IDE 的动画功能绘制的曲线。XAML 中包含的线性渐变画笔可以删除，以产生默认的白色。

动画之后

<Window x:Class="BezierProject.BezierCurve"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Bezier Curve Animation"
  Height="300" Width="300">
<Viewbox Stretch="Fill">
<Border Margin="5" BorderBrush="Black" 
  BorderThickness="1" HorizontalAlignment="Left">
<Canvas x:Name="canvas1" Width="300" Height="270">
  <Canvas.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="Black" Offset="0"/>
 <GradientStop Color="#FF00FFE8" Offset="1"/>
      <GradientStop Color="#FF00201D"/>
      </LinearGradientBrush>
   </Canvas.Background>
   <Path Stroke="Black" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="20,20">
<BezierSegment x:Name="bezierSegment" Point1="150,50"
Point2="60,160" Point3="250,230"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path x:Name="path1" Fill="Red"
Stroke="Red">
<Path.Data>
<GeometryGroup>
<LineGeometry x:Name="line1" StartPoint="20,20"
  EndPoint="150,50"/>
<EllipseGeometry x:Name="ellipse1" Center="150,50" 
  RadiusX="5" RadiusY="5" />
<LineGeometry x:Name="line2" 
  StartPoint="60,160" EndPoint="250,230"/>
<EllipseGeometry x:Name="ellipse2" 
  Center="60,160" RadiusX="5" RadiusY="5" />
</GeometryGroup>
</Path.Data>
</Path>
 
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever"
  AutoReverse="True">
<PointAnimation
  Storyboard.TargetName="bezierSegment"
  Storyboard.TargetProperty="Point1"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation Storyboard.TargetName="line1"
  Storyboard.TargetProperty="EndPoint"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="ellipse1"
  Storyboard.TargetProperty="Center"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="bezierSegment"
  Storyboard.TargetProperty="Point2"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
<PointAnimation Storyboard.TargetName="line2"
  Storyboard.TargetProperty="StartPoint"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="ellipse2"
  Storyboard.TargetProperty="Center"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Border>
</Viewbox>
</Window>

此 XAML 文件使用 BezierSegment 创建贝塞尔曲线。贝塞尔曲线的两个控制点 Point1 和 Point2 由两个椭圆形状明确标记。同时，创建了两个线段来引导您的眼睛观察动画。第一个线段连接起始点和 Point1，而第二个线段连接终点和 Point2。动画在 Storyboard 元素中使用 PointAnimation 执行。在这里，您不仅动画化了贝塞尔曲线的控制点，还动画化了红点（椭圆）和引导线。