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

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

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


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