1. 什么是長陰影
前幾年扁平化設計（Flat Design）十分流行，后來在扁平化的基礎上又流行起了長陰影（Long Shadow），長陰影其實就是擴展了物件的投影，感覺是一種光線照射下的影子，通常采用角度為 45 度的投影，給物件添加了一份立體感，長陰影快速發展為流行的設計趨勢，并經常被應用到扁平設計方案的物件，它很適合用在較小的元素上，一時之間幾乎應用的圖示都加上了長陰影，（不過現在又不流行了）
2. 使用GetAlphaMask和ContainerVisual制作長陰影
要在UWP中制作長陰影的話，可以用GetAlphaMask拿到輪廓，做成灰色，然后復制一百幾十個擺在后面，不過當然并不是直接創建這么多個UIElement，而是使用ContainerVisual類實作這個功能，ContainerVisual用于組合子級的Visual，只需簡單地呼叫VisualCollection.InsertAtBottom即可，
下面是具體的實作例子，和上篇文章介紹的一樣，首先在需要陰影的元素（TitleElement）后面放一個用于顯示陰影的UIElement（ShadowElement），布局如下：
<Grid Background="#FFE87A69" Padding="40" Margin="50" x:Name="ShadowRoot">
<Rectangle x:Name="ShadowElement" />
<TextBlock Text="One Pomodoro" Foreground="#FFfee8da" FontSize="64" x:Name="TitleElement"/>
</Grid>
然后在代碼里創建一個ContainerVisual并使用ElementCompositionPreview.SetElementChildVisual將這個ContainerVisual設定到ShadowElement的可視化層：
var textVisual = ElementCompositionPreview.GetElementVisual(TitleElement);
compositor = textVisual.Compositor;
containerVisual = compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(ShadowElement, containerVisual);
之后呼叫TitleElement的GetAlphaMask獲取輪廓，然后將這個輪廓作為Mask設定到CompositionMaskBrush的Mask屬性，重復一百次：
var mask = TitleElement.GetAlphaMask();
var shadowColor = Color.FromArgb(255, 160, 59, 49);
int depth = 100;
for (int i = 0; i < depth; i++)
{
//創建Brush
var maskBrush = compositor.CreateMaskBrush();
maskBrush.Mask = mask;
maskBrush.Source = compositor.CreateColorBrush(shadowColor);
//創建Visual
var visual = compositor.CreateSpriteVisual();
visual.Brush = maskBrush;
visual.Offset = new Vector3(i + 1, i + 1, 0);
//將Visual添加到ContainerVisual
containerVisual.Children.InsertAtBottom(visual);
//同步Visual和TextVisual的尺寸
var bindSizeAnimation = compositor.CreateExpressionAnimation("textVisual.Size");
bindSizeAnimation.SetReferenceParameter("textVisual", textVisual);
visual.StartAnimation("Size", bindSizeAnimation);
}
然后終于……
……還是沒完成，還需要為ContainerVisual設定Clip以免陰影越界，看起來需要寫很多代碼去實作，但其實有個簡單的方法，將外面那層的ShadowRoot的CornerRadius設定為1，Grid就會自動自覺把超出范圍的內容裁剪掉，雖然不知道具體原理，但有需要的話其它情況也可以偷懶這樣做，也許有人不喜歡圓角，但區區1像素的圓角你不說我不說又有誰會知道呢，
Grid Background="#FFE87A69" Padding="40" Margin="50" x:Name="ShadowRoot" CornerRadius="1">
這樣一個漂亮的長陰影就完成了，
3. 淡出的陰影
要實作淡出的陰影原理也很簡單，別想太復雜，就只是準備好多個顏色漸漸改變的Visual，插進去ContainerVisual里就完成了，代碼及效果如下（順便一提這種情況下Vector3真好用）：
int depth = 60;
float opacity = 0.3f;
Vector3 background = new Vector3(232, 122, 105);
var maskBrush = compositor.CreateMaskBrush();
maskBrush.Mask = mask;
//計算陰影的顏色
Vector3 shadowColor = background - (background - new Vector3(0, 0, 0)) * opacity;
shadowColor = Vector3.Max(Vector3.Zero, shadowColor);
shadowColor += (background - shadowColor) * i / depth;
maskBrush.Source = compositor.CreateColorBrush(Color.FromArgb(255, (byte)shadowColor.X, (byte)shadowColor.Y, (byte)shadowColor.Z));
4. 實際應用
就只是一個靜態的長陰影的話，那還不如用PS做成圖片在放進UWP里，GetAlphaMask另一個好處是它并不僅獲取靜態的輪廓，而是一直和源頭同步，這樣可玩性就大多了，例如我把長陰影的設計元素添加到番茄鐘里面，成果如下：
5. 結語
雖然長陰影已經有點過時了，但自己做起來還是覺得很酷很酷，剛開始還擔心這樣搞性能會很差，實際運行起來后發覺超級OK，上面的影片可以安裝我的番茄鐘應用試玩一下，安裝地址：
一個番茄鐘
6. 參考
[ContainerVisual Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs]((https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.containervisual)
VisualCollection Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
Vector3 Struct (Windows.Foundation.Numerics) - Windows UWP applications Microsoft Docs
7. 原始碼
OnePomodoro_LongShadow.xaml.cs at master
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1695.html
標籤：UWP