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

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" />

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

posted @ 2021-12-16 09:25  dino.c  阅读(2472)  评论(7编辑  收藏  举报