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

czwy

发布于 2024-05-16 16:22:09

1840

发布于 2024-05-16 16:22:09

文章被收录于专栏：czwy的博客

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

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

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

基于Polyline的线条动画效果

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

<Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />

这样，我们就得到一条这样的折线:

接下来，利用StrokeDashArray实现与上边折线相同路径的虚线（点划线）：

<Polyline Points="240 20 140 20 140 100 0 100" Stroke="red"
StrokeDashArray="20 30" />

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

<Polyline Points="240 20 140 20 140 100 0 100" Stroke="red"
StrokeDashArray="20 300" />

接下来就是借助StrokeDashOffset来实现动画。

<Grid
    Grid.Row="0"
    Grid.Column="0"
    Margin="5">
    <Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />
    <Polyline
        Points="240 20 140 20 140 100 0 100"
        Stroke="red" StrokeThickness=""
        StrokeDashArray="20 300">
        <Polyline.Triggers>
            <EventTrigger RoutedEvent="Polyline.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset">
                        <DoubleAnimation
                            From="0"
                            To="-320"
                            Duration="0:0:3" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Polyline.Triggers>
    </Polyline>
</Grid>

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

基于多条线段的动画

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

<Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />
<Polyline
    x:Name="polyline1"
    Points="260 20 240 20"
    Stroke="{StaticResource linearBrush}" />
<Polyline
    x:Name="polyline2"
    Points="140 0 140 20"
    Stroke="{StaticResource linearBrush}" />
<Polyline
    x:Name="polyline3"
    Points="160 100 140 100"
    Stroke="{StaticResource linearBrush}" />

这里有个细节需要注意，第1条线段向左移动刚好离开折线水平轨迹时，第2条线段才开始向下延垂直轨迹移动，并且移动速度一致，才能保证形成的移动的线段颜色连贯且长度不变。

<Storyboard x:Key="moveLines" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="00:00:00.800" Value="-100" />
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-121" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <EasingDoubleKeyFrame KeyTime="00:00:00.800" Value="0" />
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="20" />
        <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="80" />
        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="101" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="polyline3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="0" />
        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-20" />
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-160" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

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

<Polygon Fill="#fff" Points="240,19 139,19 139,99 0,99 0,79 119,79 119,0 240,0 240,19 240,21 141,21 141,101 0,101 0,99 -20,99 -20,101 -20,122 161,122 161,41 260,41 260,19" />

这样基本实现了渐变色线条的动画效果，但终究不够优雅。

基于等腰三角形的动画

上一种方法中，在拐角处由两条线段配合的动画实现的效果，一条线段移出，另一条移入，连接起来刚好是个等腰直角三角形。

然后用线性渐变色填充三角形就可以实现移出的线段颜色和移入部分颜色相同。

<LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
    <GradientStop Offset="0.25" Color="#399953" />
    <GradientStop Offset="0.5" Color="#fbb300" />
    <GradientStop Offset="0.75" Color="#d53e33" />
    <GradientStop Offset="1" Color="#377af5" />
</LinearGradientBrush>
<Polygon
    x:Name="trigle"
    Fill="{StaticResource linearBrush}"
    Points="240 19 240 40 220 19"/>

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

<Storyboard x:Key="moveanimation" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="trigle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="20" />
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-99" />
        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-99" />
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-240" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="trigle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0" />
        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="80" />
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="80" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Grid Grid.Row="0" Grid.Column="1">
    <Polyline Points="240 20 140 20 140 100 0 100" Stroke="#ddd" />
    <Polygon
        x:Name="trigle"
        Fill="{StaticResource linearBrush}"
        Points="240 19 240 40 220 19">
        <Polygon.RenderTransform>
            <TranslateTransform />
        </Polygon.RenderTransform>
        <Polygon.Triggers>
            <EventTrigger RoutedEvent="Polygon.Loaded">
                <BeginStoryboard Storyboard="{StaticResource moveanimation}" />
            </EventTrigger>
        </Polygon.Triggers>
    </Polygon>
    <Polygon Fill="#fff" Points="240,19 139,19 139,99 0,99 0,79 119,79 119,0 240,0 240,19 240,21 141,21 141,101 0,101 0,99 -20,99 -20,101 -20,122 161,122 161,41 260,41 260,19" d:IsHidden="True" />
</Grid>