[UWP]运用GetAlphaMask和ContainerVisual制造长暗影(Long Shadow)
2019-11-18杂谈搜奇网34°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
7. 源码
OnePomodoro_LongShadow.xaml.cs at master