WPF利用Shape实现复杂线条动画

看到巧用 CSS/SVG 实现复杂线条光效动画的文章，便也想尝试用WPF的Shape配合动画实现同样的效果。ChokCoco大佬的文章中先容了基于SVG的线条动画效果和通过角向渐变配合 MASK 实现渐变线条两种方式。WPF中的Shape与SVG非常相似，因此这种方式也很容易实现。但WPF中仅有的两种渐变画刷不包含角向渐变，本文利用了别的两种方式实现同样的效果。

在Avalonia的API文档中有看到ConicGradientBrush，应该可以用角向渐变的方式来实现。

首先看一下三种方式实现的效果（录制的gif中颜色存在一些毛病，动画有些卡顿，实际效果要好一些）：

基于Polyline的线条动画效果

这种方式也是利用StrokeDashArray实现虚线样式，然后通过动画设置StrokeDashOffset来实现动画。首先，用Polyline绘制一段折线：

1. [/code]如许，我们就得到一条如许的折线:
2. [align=center][img]https://img2024.cnblogs.com/blog/3056716/202405/3056716-20240515085500479-1760752879.png[/img][/align]
3. 接下来，利用StrokeDashArray实现与上边折线类似路径的虚线（点划线）：
4. [code]

复制代码

StrokeDashArray设置了虚线（点划线）中实线段的长度以及间隔，这里和SVG中的stroke-dasharray略有不同，WPF中StrokeDashArray利用的是相对值。例如此处设置的StrokeDashArray="20 30"体现实线段长度为20，间隔为30，这些值是相对于线段的宽度StrokeThickness。如果StrokeThickness=2，那么实线段长度就是40个设备无关单元（Device Independent Units），间隔就是60DIUs。
当我们把间隔设置足够大时，就可以只看到一条实线段，这里折线中三条线段总长是320，因此把实线段设置20，间隔设置300：

1. [/code][align=center][img]https://img2024.cnblogs.com/blog/3056716/202405/3056716-20240515085555475-183840946.png[/img][/align]
2. 接下来就是借助StrokeDashOffset来实现动画。
3. [code]<Grid
4.     Grid.Row="0"
5.     Grid.Column="0"
6.     Margin="5">
7.     <Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />
8.     <Polyline
9.         Points="240 20 140 20 140 100 0 100"
10.         Stroke="red" StrokeThickness=""
11.         StrokeDashArray="20 300">
12.         <Polyline.Triggers>
13.             <EventTrigger RoutedEvent="Polyline.Loaded">
14. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
15.     <GradientStop Offset="0.25" Color="#399953" />
16.     <GradientStop Offset="0.5" Color="#fbb300" />
17.     <GradientStop Offset="0.75" Color="#d53e33" />
18.     <GradientStop Offset="1" Color="#377af5" />
19. </LinearGradientBrush>
20. <Polygon
21.     x:Name="trigle"
22.     Fill="{StaticResource linearBrush}"
23.     Points="240 19 240 40 220 19"/><BeginStoryboard>
24. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
25.     <GradientStop Offset="0.25" Color="#399953" />
26.     <GradientStop Offset="0.5" Color="#fbb300" />
27.     <GradientStop Offset="0.75" Color="#d53e33" />
28.     <GradientStop Offset="1" Color="#377af5" />
29. </LinearGradientBrush>
30. <Polygon
31.     x:Name="trigle"
32.     Fill="{StaticResource linearBrush}"
33.     Points="240 19 240 40 220 19"/>    <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset">
34. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
35.     <GradientStop Offset="0.25" Color="#399953" />
36.     <GradientStop Offset="0.5" Color="#fbb300" />
37.     <GradientStop Offset="0.75" Color="#d53e33" />
38.     <GradientStop Offset="1" Color="#377af5" />
39. </LinearGradientBrush>
40. <Polygon
41.     x:Name="trigle"
42.     Fill="{StaticResource linearBrush}"
43.     Points="240 19 240 40 220 19"/>        <DoubleAnimation
44. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
45.     <GradientStop Offset="0.25" Color="#399953" />
46.     <GradientStop Offset="0.5" Color="#fbb300" />
47.     <GradientStop Offset="0.75" Color="#d53e33" />
48.     <GradientStop Offset="1" Color="#377af5" />
49. </LinearGradientBrush>
50. <Polygon
51.     x:Name="trigle"
52.     Fill="{StaticResource linearBrush}"
53.     Points="240 19 240 40 220 19"/>            From="0"
54. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
55.     <GradientStop Offset="0.25" Color="#399953" />
56.     <GradientStop Offset="0.5" Color="#fbb300" />
57.     <GradientStop Offset="0.75" Color="#d53e33" />
58.     <GradientStop Offset="1" Color="#377af5" />
59. </LinearGradientBrush>
60. <Polygon
61.     x:Name="trigle"
62.     Fill="{StaticResource linearBrush}"
63.     Points="240 19 240 40 220 19"/>            To="-320"
64. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
65.     <GradientStop Offset="0.25" Color="#399953" />
66.     <GradientStop Offset="0.5" Color="#fbb300" />
67.     <GradientStop Offset="0.75" Color="#d53e33" />
68.     <GradientStop Offset="1" Color="#377af5" />
69. </LinearGradientBrush>
70. <Polygon
71.     x:Name="trigle"
72.     Fill="{StaticResource linearBrush}"
73.     Points="240 19 240 40 220 19"/>            Duration="0:0:3" />
74. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
75.     <GradientStop Offset="0.25" Color="#399953" />
76.     <GradientStop Offset="0.5" Color="#fbb300" />
77.     <GradientStop Offset="0.75" Color="#d53e33" />
78.     <GradientStop Offset="1" Color="#377af5" />
79. </LinearGradientBrush>
80. <Polygon
81.     x:Name="trigle"
82.     Fill="{StaticResource linearBrush}"
83.     Points="240 19 240 40 220 19"/>    </Storyboard>
84. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
85.     <GradientStop Offset="0.25" Color="#399953" />
86.     <GradientStop Offset="0.5" Color="#fbb300" />
87.     <GradientStop Offset="0.75" Color="#d53e33" />
88.     <GradientStop Offset="1" Color="#377af5" />
89. </LinearGradientBrush>
90. <Polygon
91.     x:Name="trigle"
92.     Fill="{StaticResource linearBrush}"
93.     Points="240 19 240 40 220 19"/></BeginStoryboard>
94.             </EventTrigger>
95.         </Polyline.Triggers>
96.     </Polyline>
97. </Grid>

复制代码

与CSS/SVG实现的方式一样，WPF中也只能对整段虚线设置渐变色，无法对此中一段实线设置。要想实现渐变效果只能另寻他法。
基于多条线段的动画

最朴素的想法就是用一条渐变色的线段沿着折线的路径移动，但是最大的题目在于折线拐角处难以处置惩罚。最为粗暴简单的思路就是针对折线的三段预备三条线段，第一条线段动画即将结束时，第二条开始，第二条动画即将结束时第三条开始。

1. [/code][align=center][img]https://img2024.cnblogs.com/blog/3056716/202405/3056716-20240515085636605-2024114664.png[/img][/align]
2. 这里有个细节需要注意，第1条线段向左移动刚好离开折线水平轨迹时，第2条线段才开始向下延垂直轨迹移动，并且移动速度一致，才能包管形成的移动的线段颜色连贯且长度不变。
3. [code]<Storyboard x:Key="moveLines" RepeatBehavior="Forever">
4.     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
5.         <EasingDoubleKeyFrame KeyTime="00:00:00.800" Value="-100" />
6.         <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-121" />
7.     </DoubleAnimationUsingKeyFrames>
8.     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
9.         <EasingDoubleKeyFrame KeyTime="00:00:00.800" Value="0" />
10.         <EasingDoubleKeyFrame KeyTime="00:00:01" Value="20" />
11.         <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="80" />
12.         <EasingDoubleKeyFrame KeyTime="00:00:02" Value="101" />
13.     </DoubleAnimationUsingKeyFrames>
14.     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
15.         <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="0" />
16.         <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-20" />
17.         <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-160" />
18.     </DoubleAnimationUsingKeyFrames>
19. </Storyboard>

复制代码

如许看效果并不显着，接下来就是需要用一个形状把完成动画的线段遮挡起来：

1. [/code][align=center][img]https://img2024.cnblogs.com/blog/3056716/202405/3056716-20240515085708893-250417300.gif[/img][/align]
2. 如许根本实现了渐变色线条的动画效果，但终究不敷优雅。
3. [size=5]基于等腰三角形的动画[/size]
5. 上一种方法中，在拐角处由两条线段配合的动画实现的效果，一条线段移出，另一条移入，连接起来刚好是个等腰直角三角形。
6. [align=center][img]https://img2024.cnblogs.com/blog/3056716/202405/3056716-20240515085725686-1953171382.png[/img][/align]
7. 然后用线性渐变色填充三角形就可以实现移出的线段颜色和移入部分颜色类似。
8. [code]<LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
9.     <GradientStop Offset="0.25" Color="#399953" />
10.     <GradientStop Offset="0.5" Color="#fbb300" />
11.     <GradientStop Offset="0.75" Color="#d53e33" />
12.     <GradientStop Offset="1" Color="#377af5" />
13. </LinearGradientBrush>
14. <Polygon
15.     x:Name="trigle"
16.     Fill="{StaticResource linearBrush}"
17.     Points="240 19 240 40 220 19"/>

复制代码

接下来就是三角形沿着轨迹移动的动画以及遮挡轨迹以外部分了。

1. <Grid
2.     Grid.Row="0"
3.     Grid.Column="0"
4.     Margin="5">
5.     <Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />
6.     <Polyline
7.         Points="240 20 140 20 140 100 0 100"
8.         Stroke="red" StrokeThickness=""
9.         StrokeDashArray="20 300">
10.         <Polyline.Triggers>
11.             <EventTrigger RoutedEvent="Polyline.Loaded">
12. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
13.     <GradientStop Offset="0.25" Color="#399953" />
14.     <GradientStop Offset="0.5" Color="#fbb300" />
15.     <GradientStop Offset="0.75" Color="#d53e33" />
16.     <GradientStop Offset="1" Color="#377af5" />
17. </LinearGradientBrush>
18. <Polygon
19.     x:Name="trigle"
20.     Fill="{StaticResource linearBrush}"
21.     Points="240 19 240 40 220 19"/><BeginStoryboard>
22. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
23.     <GradientStop Offset="0.25" Color="#399953" />
24.     <GradientStop Offset="0.5" Color="#fbb300" />
25.     <GradientStop Offset="0.75" Color="#d53e33" />
26.     <GradientStop Offset="1" Color="#377af5" />
27. </LinearGradientBrush>
28. <Polygon
29.     x:Name="trigle"
30.     Fill="{StaticResource linearBrush}"
31.     Points="240 19 240 40 220 19"/>    <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset">
32. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
33.     <GradientStop Offset="0.25" Color="#399953" />
34.     <GradientStop Offset="0.5" Color="#fbb300" />
35.     <GradientStop Offset="0.75" Color="#d53e33" />
36.     <GradientStop Offset="1" Color="#377af5" />
37. </LinearGradientBrush>
38. <Polygon
39.     x:Name="trigle"
40.     Fill="{StaticResource linearBrush}"
41.     Points="240 19 240 40 220 19"/>        <DoubleAnimation
42. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
43.     <GradientStop Offset="0.25" Color="#399953" />
44.     <GradientStop Offset="0.5" Color="#fbb300" />
45.     <GradientStop Offset="0.75" Color="#d53e33" />
46.     <GradientStop Offset="1" Color="#377af5" />
47. </LinearGradientBrush>
48. <Polygon
49.     x:Name="trigle"
50.     Fill="{StaticResource linearBrush}"
51.     Points="240 19 240 40 220 19"/>            From="0"
52. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
53.     <GradientStop Offset="0.25" Color="#399953" />
54.     <GradientStop Offset="0.5" Color="#fbb300" />
55.     <GradientStop Offset="0.75" Color="#d53e33" />
56.     <GradientStop Offset="1" Color="#377af5" />
57. </LinearGradientBrush>
58. <Polygon
59.     x:Name="trigle"
60.     Fill="{StaticResource linearBrush}"
61.     Points="240 19 240 40 220 19"/>            To="-320"
62. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
63.     <GradientStop Offset="0.25" Color="#399953" />
64.     <GradientStop Offset="0.5" Color="#fbb300" />
65.     <GradientStop Offset="0.75" Color="#d53e33" />
66.     <GradientStop Offset="1" Color="#377af5" />
67. </LinearGradientBrush>
68. <Polygon
69.     x:Name="trigle"
70.     Fill="{StaticResource linearBrush}"
71.     Points="240 19 240 40 220 19"/>            Duration="0:0:3" />
72. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
73.     <GradientStop Offset="0.25" Color="#399953" />
74.     <GradientStop Offset="0.5" Color="#fbb300" />
75.     <GradientStop Offset="0.75" Color="#d53e33" />
76.     <GradientStop Offset="1" Color="#377af5" />
77. </LinearGradientBrush>
78. <Polygon
79.     x:Name="trigle"
80.     Fill="{StaticResource linearBrush}"
81.     Points="240 19 240 40 220 19"/>    </Storyboard>
82. <LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
83.     <GradientStop Offset="0.25" Color="#399953" />
84.     <GradientStop Offset="0.5" Color="#fbb300" />
85.     <GradientStop Offset="0.75" Color="#d53e33" />
86.     <GradientStop Offset="1" Color="#377af5" />
87. </LinearGradientBrush>
88. <Polygon
89.     x:Name="trigle"
90.     Fill="{StaticResource linearBrush}"
91.     Points="240 19 240 40 220 19"/></BeginStoryboard>
92.             </EventTrigger>
93.         </Polyline.Triggers>
94.     </Polyline>
95. </Grid><LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
96.     <GradientStop Offset="0.25" Color="#399953" />
97.     <GradientStop Offset="0.5" Color="#fbb300" />
98.     <GradientStop Offset="0.75" Color="#d53e33" />
99.     <GradientStop Offset="1" Color="#377af5" />
100. </LinearGradientBrush>
101. <Polygon
102.     x:Name="trigle"
103.     Fill="{StaticResource linearBrush}"
104.     Points="240 19 240 40 220 19"/>        

复制代码

小结

基于Polyline的线条StrokeDashOffset的方式最为灵活简洁，不光适用于直角折线，还适用于各种曲线。如果把此处的Polyline换成一个Ellipse，就可以实现简单的转圈圈等待的动效，但其不足在于线条样式美化空间有限。
基于多条线段的动画可以美化线条，但只适用于Polyline或者直线组成的Path，一旦存在曲线就不适用了。
基于等腰三角形的动画可以看做是基于多条线段的动画的一种特殊场景，局限性较大，仅适用于带直角的折线。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。