1. 什麼是長陰影 前幾年扁平化設計（Flat Design）十分流行，後來在扁平化的基礎上又流行起了長陰影（Long Shadow）。長陰影其實就是擴展了對象的投影，感覺是一種光線照射下的影子，通常採用角度為 45 度的投影，給對象添加了一份立體感。長陰影快速發展為流行的設計趨勢，並經常被應用到扁 ...
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
