首页 技术 正文
技术 2022年11月8日
0 收藏 316 点赞 1,802 浏览 2143 个字

Windows.UI.Composition API是可以从任何通用Windows平台应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象动画效果

Composition API在 10586SDK 中就已经出现,但是在年度更新之后,该SDK变得更加完善,也有了更多样性的功能。今天我们就来谈谈如何在基于 Anniversary SDK 的UWP应用中使用Composition API创建DropShadow效果。

1.首先,假如我们想要为一个Ellipse对象创造DropShadow效果,那么第一步,我们需要先创建一个Canvas对象,这个对象位于Ellipse的“背后”,要被Ellipse遮挡住,比如这样:

<Grid>
<Canvas x:Name="host"/>
<Ellipse x:Name="target"/>
</Grid>

2.使用ElementCompositionPreview.GetElementVisual()方法获得Canvas的Visual,然后得到该Visual的Compositor,其中下面代码中的host是我们在XMAL中创建的Canvas:

            Visual hostvisual = ElementCompositionPreview.GetElementVisual(host);
Compositor compositor = hostvisual.Compositor;

3.现在我们要通过compositor创建一个新的SpriteVisual。SpriteVisual派生于ContainerVisual类,而ContainerVisual类派生于Visual类。相比起ContainerVisual,SpriteVisual类还包含了图像、效果和交换链形式的内容。在我们这篇blog中,我们就是通过这个SpriteVisual来构建DropShadow。创建好SpriteVisual之后,我们还需要使用ElementCompositionPreview.SetElementChildVisual()方法将这个SpriteVisual添加到XMAL的可视化树中:

            SpriteVisual spritevisual = compositor.CreateSpriteVisual();
ElementCompositionPreview.SetElementChildVisual(host, spritevisual);

4.现在开始进入重要部分,开始构建shadow。我们还是需要使用compositor,通过它我们可以创造一个新的DropShadow。这个创造出的DropShadow就是我们需要的shadow啦!我们可以通过设置这个DropShadow的属性来的到我们需要的DropShadow:

            DropShadow dropshadow = compositor.CreateDropShadow();
dropshadow.Color = apptheme.Gary_Color_Brush.Color;
dropshadow.Opacity = 0.5f;
dropshadow.Offset = new System.Numerics.Vector3(0f, 5f, 0f);
dropshadow.Mask = (target as Shape).GetAlphaMask();

这里的这几行要解释一下:Color属性和Opacity属性都不需要怎么介绍了吧,就是代表着这个DropShadow的颜色和不透明度。Offset表示的是阴影的偏移量。这个偏移量是相对于Canvas在UI中的位置来说的,并且Vector3这个类型在上面代码中的构造函数的三个参数都是float类型,因此数值后面要加上f。最下面的Mask属性呢,可以通过ImageTextBlockShape 这三个类各自实现一个称为 GetAlphaMask 的方法,该方法返回一个 CompositionBrush,用于表示带有元素形状的灰度图像。 此 CompositionBrush 可充当复合DropShadow的输入,因此阴影可以反映元素的形状,而不是矩形。 这将为文本、带有 alpha 的图像和形状启用像素完美、基于轮廓的阴影。如果不是这三个类型的对象是不会带有GetAlphaMask()方法的,因此在使用时一定要注意,否则会抛出异常。

5.然后,我们要把这个DropShadow赋值给spritevisual的Shadow属性:

            spritevisual.Shadow = dropshadow;

6.最后,我们要创建一个表达式动画。完成了这一步之后,DropShadow效果就实现啦:

            ExpressionAnimation animation = compositor.CreateExpressionAnimation("hostvisual.Size");
animation.SetReferenceParameter("hostvisual", hostvisual);
spritevisual.StartAnimation("Size", animation);

至此,我们的DropShadow效果就创建完成啦,大家可以自己动手试试~

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,484
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,899
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,732
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,485
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,125
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,285