我正在构建一个小型 Silverlight 应用程序。在我的应用程序中，我需要绘制线条，类似于附图中所示的内容。
我知道绘制拱形连接线（绿色）的最佳方法是使用贝塞尔曲线。
我的问题是，如何对线条的绘制进行动画处理（让它们从起始 (X,Y) 坐标开始到目标坐标）？
附图：
我花了一些时间研究这个，这是可能的。诀窍是你不要为路径设置动画。相反，您最初将路径剪切到零维度的边界区域，然后实质上对剪切区域的高度和宽度进行动画处理。最终效果看起来像是从 A 点到 B 点的路径被动画化。
看一下下面的 XAML 示例：
<Canvas x:Name="LayoutRoot" Background="White">
<Path Stroke="Blue" StrokeThickness="2" StrokeDashArray="10,2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="50,50">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment
Point1="50,20"
Point2="120,170"
Point3="350,150"
/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Clip>
<PathGeometry>
<PathFigure IsClosed="true">
<LineSegment x:Name="seg1" Point="50,50"/>
<LineSegment x:Name="seg2" Point="0,0"/>
<LineSegment x:Name="seg3" Point="0,0"/>
<LineSegment x:Name="seg4" Point="0,0"/>
</PathFigure>
</PathGeometry>
</Path.Clip>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetName="seg2" Storyboard.TargetProperty="point" To="350,50" Duration="0:0:2" />
<PointAnimation Storyboard.TargetName="seg3" Storyboard.TargetProperty="point" To="350,150" Duration="0:0:2" />
<PointAnimation Storyboard.TargetName="seg4" Storyboard.TargetProperty="point" To="50,1500" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="20" RadiusY="20" />
</Path.Data>
</Path>
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="350,150" RadiusX="20" RadiusY="20" />
</Path.Data>
</Path>
</Canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
