hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

[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

7. 源码

OnePomodoro_LongShadow.xaml.cs at master

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
[UWP]运用GetAlphaMask和ContainerVisual制造长暗影(Long Shadow)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282226.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>