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

  • A+
所属分类：.NET技术
摘要

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

1. UWP 的 Text Shimmer 动画

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

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

它的源码在这里：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>

它的实际效果如下：

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

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

3. RadialGradientBrush

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

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

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

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

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

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

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

便宜好用的国外VPS推荐