[UWP]使用GetAlphaMask和ContainerVisual製做長陰影(Long Shadow)

時間 2019-11-05

標籤 uwp 使用 getalphamask containervisual 製做陰影 long shadow 简体版

原文原文鏈接

原文: [UWP]使用GetAlphaMask和ContainerVisual製做長陰影(Long Shadow)

1. 什麼是長陰影#

前幾年扁平化設計（Flat Design）十分流行，後來在扁平化的基礎上又流行起了長陰影（Long Shadow）。長陰影其實就是擴展了對象的投影，感受是一種光線照射下的影子，一般採用角度爲 45 度的投影，給對象添加了一份立體感。長陰影快速發展爲流行的設計趨勢，並常常被應用到扁平設計方案的對象。它很適合用在較小的元素上，一時之間幾乎應用的圖標都加上了長陰影。（不過如今又不流行了）html

2. 使用GetAlphaMask和ContainerVisual製做長陰影#

要在UWP中製做長陰影的話，能夠用GetAlphaMask拿到輪廓，作成灰色，而後複製一百幾十個擺在後面。不過固然並非直接建立這麼多個UIElement，而是使用ContainerVisual類實現這個功能。ContainerVisual用於組合子級的Visual，只需簡單地調用VisualCollection.InsertAtBottom便可。git

下面是具體的實現例子，和上篇文章介紹的同樣，首先在須要陰影的元素（TitleElement）後面放一個用於顯示陰影的UIElement（ShadowElement），佈局以下：github

 
 
 
 
  
  
  
  Copy
 
 
 
 
<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的可視化層：windows

 
 
 
 
  
  
  
  Copy
 
 
 
 
var textVisual = ElementCompositionPreview.GetElementVisual(TitleElement);
compositor = textVisual.Compositor;
containerVisual = compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(ShadowElement, containerVisual);

以後調用TitleElement的GetAlphaMask獲取輪廓，而後將這個輪廓做爲Mask設置到CompositionMaskBrush的Mask屬性，重複一百次：api

 
 
 
 
  
  
  
  Copy
 
 
 
 
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);
}

而後終於……app

……仍是沒完成，還須要爲ContainerVisual設置Clip以避免陰影越界。看起來須要寫不少代碼去實現，但其實有個簡單的方法，將外面那層的ShadowRoot的CornerRadius設置爲1，Grid就會自動自覺把超出範圍的內容裁剪掉。雖然不知道具體原理，但有須要的話其它狀況也能夠偷懶這樣作，也許有人不喜歡圓角，但區區1像素的圓角你不說我不說又有誰會知道呢。佈局

 
 
 
 
  
  
  
  Copy
 
 
 
 
Grid Background="#FFE87A69" Padding="40" Margin="50" x:Name="ShadowRoot" CornerRadius="1">

這樣一個漂亮的長陰影就完成了。性能

3. 淡出的陰影#

要實現淡出的陰影原理也很簡單，別想太複雜，就只是準備好多個顏色漸漸改變的Visual，插進去ContainerVisual裏就完成了。代碼及效果以下（順便一提這種狀況下Vector3真好用）：動畫

 
 
 
 
  
  
  
  Copy
 
 
 
 
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));