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
作者：dino.c
出處：http://www.cnblogs.com/dino623/
說明：歡迎轉載并請標明來源和作者，如有錯漏請指出，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/382167.html
標籤：.NET技术