[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