[UWP]运用GetAlphaMask和ContainerVisual制造长暗影(Long Shadow)

2019-11-18杂谈搜奇网26°c

A⁺ A^-

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