[WPF] 用 OpacityMask 模仿 UWP 的 Text Shimmer 动画

dino.c

发布于 2021-12-16 11:00:12

6230

发布于 2021-12-16 11:00:12

1. UWP 的 Text Shimmer 动画

在 UWP 的 Windows Composition Samples 中有一个 Text Shimmer 动画，它用于展示如何使用 Composition Light。从下面的 Gif 可以看到，这个动画很简单，就是用 PointLight 从左到右扫过一行文字。

它的源码在这里：https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 14393/TextShimmer

虽然 WPF 没有 Composition Light，但要玩这个简单的动画任然没问题，就是用 OpacityMask 模仿一下而已。

2. OpacityMask

WPF 可以让元素根据它的 OpacityMask 变得透明或部分透明。OpactiyMask 是一个 Brush，这个Brush 的颜色将被忽略，只关心它的 alpha 通道。例如下面这段 Xaml：

<TextBlock HorizontalAlignment="Center"
           VerticalAlignment="Center"
           FontFamily="SegoeUI"
           FontSize="100"
           FontWeight="Thin"
           Foreground="DimGray"
           Text="Text Shimmer">
    <TextBlock.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".5,.5" GradientOrigin=".5,.5" RadiusX=".43" RadiusY="2">
            <GradientStop Color="Black" />
            <GradientStop Offset=".5" Color="#6000" />
            <GradientStop Offset="1" Color="#2000" />
        </RadialGradientBrush>
    </TextBlock.OpacityMask>
</TextBlock>

它的实际效果如下：

看上去就和 PointLight 的效果差不过。TextBlock 的 OpacityMask 是一个圆形渐变画刷 RadialGradientBrush ，它并不关心各个 GradientStop 的颜色，只关心它们的 alpha 通道。也就是说，这个 RadialGradientBrush 让 TextBlock 从中心点向外渐渐变得透明。

3. RadialGradientBrush

上面的 OpacityMask 是一个 RadialGradientBrush，RadialGradientBrush 代表一个圆形的渐变画刷，在这里我们要关心它的三个属性：

RadiusX/RadiusY： 圆形的水平/垂直半径。 Center： 圆形的最外围的中心。 GradientOrigin： 渐变开始的二位焦点的位置。

这三个属性的作用可以参考下图：

4. 实现动画

最后，要实现 Text Shimmer 的动画效果只需要对 Center 和 GradientOrigin 做 PointAnimation，实现 OpacityMask 的水平移动：

<PointAnimation RepeatBehavior="Forever"
                Storyboard.TargetName="Brush"
                Storyboard.TargetProperty="Center"
                From="-2,.5"
                To="3,.5"
                Duration="0:0:3.3" />
<PointAnimation RepeatBehavior="Forever"
                Storyboard.TargetName="Brush"
                Storyboard.TargetProperty="GradientOrigin"
                From="-2,.5"
                To="3,.5"
                Duration="0:0:3.3" />