1. Composition Lighting

UWP中的Composition Light是一组可以创建3D光照的API,它明明十分好玩而且强大, 但博客园几乎没有相关文章(用UWPpointlight做关键字只能找到我自己的文章),这篇文章就 来介绍Composition Lighting的入门知识。

Composition Light有四种类型:

  • AmbientLight,发出出现的非定向光源的光源反射场景中的所有内容。
  • DistantLight,无限大远处的光源的发光的一个方向。 如 sun。
  • PointLight,发出的所有方向光的光点源。 如灯泡。
  • SpotLight,发出的光线的内部和外部圆锥光源。 如手电筒。

这四种类型的它们Composition Light分别使用Compositor的CreateXXXXXLight()函数创建,例如:

var pointLight = compositor.CreatePointLight();

上图分别是SpotLight和PointLight的效果(其它两个截图没什么好看的)。

2. 使用PointLight

使用PointLight最基础的例子是WindowsCompositionSamples中的 TextShimmer 例子,下面用这个例子的代码介绍如何使用PointLight。

首先把需要应用PointLight的的TextBlock添加到UI,颜色为DimGray。

<TextBlock Name="TextBlock" FontSize="100" Foreground="DimGray" FontFamily="SegoeUI" FontWeight="Thin"
TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center">
Text Shimmer
</TextBlock>

然后获取这个TextBlock的Visual对象,用Compositor.CreatePointLight()创建PointLight,并且设置CoordinateSpaceTargets,这两个属性用于关联Visual对象和PointLight。这时候TextBlock变成全黑,除非PointLight应用到它的位置。

_compositor = ElementCompositionPreview.GetElementVisual(TextBlock).Compositor;

//get interop visual for XAML TextBlock
var text = ElementCompositionPreview.GetElementVisual(TextBlock); _pointLight = _compositor.CreatePointLight();
_pointLight.Color = Colors.White;
_pointLight.CoordinateSpace = text; //set up co-ordinate space for offset
_pointLight.Targets.Add(text); //target XAML TextBlock

PointLight的主要属性包含Color和Offset,Color默认是白色,而下面这段代码实现Offset的动画。

Offset是一个Vector3的属性,X、Y和Z代表PointLight的光源在三维空间的坐标。首先将PointLight的Offset设置为TextBlock的左边,垂直居中,Z为TextBlock的FontSize。然后启动一个一直重复的动画,以TextBlock的右边为目标水平移动。

//starts out to the left; vertically centered; light's z-offset is related to fontsize
_pointLight.Offset = new Vector3(-(float)TextBlock.ActualWidth, (float)TextBlock.ActualHeight / 2, (float)TextBlock.FontSize); //simple offset.X animation that runs forever
var animation = _compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(1, 2 * (float)TextBlock.ActualWidth);
animation.Duration = TimeSpan.FromSeconds(3.3f);
animation.IterationBehavior = AnimationIterationBehavior.Forever; _pointLight.StartAnimation("Offset.X", animation);

运行效果如下:

3. 叠加Composition Light

Composition Light可以叠加,效果和光学原理一样,即红色加蓝色会成为紫色,之类之类的。不过要注意的是除了AmbientLight外,其它光照只可以叠加两个。

这样就很有可玩性,例如下面这个动画:

4. 结语

上面的动画可以安装我的番茄钟应用试玩一下,安装地址:

一个番茄钟

Composition Light玩起来真是一发不可收拾,更多示例可以下载Windows Composition Samples 玩玩。

5. 参考

组合照明 - Windows UWP applications Microsoft Docs

XAML 照明 - Windows UWP applications Microsoft Docs

PointLight Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

XamlLight Class (Windows.UI.Xaml.Media) - Windows UWP applications Microsoft Docs

6. 源码

OnePomodoro_TheBigOne.xaml.cs at master

最新文章

  1. js判断是否存在指定变量或函数
  2. ADO.NET Entity Framework
  3. 主页面获取iframe 的子页面方法。
  4. android Java BASE64编码和解码二:图片的编码和解码
  5. Spring如何处理线程并发
  6. 10年山东省赛-E-最短路
  7. 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
  8. Table of Contents - HttpClient
  9. J2ee入门:servlet-mapping的映射配置
  10. git pull以及git pull --rebase
  11. HBase学习笔记1 - 如何编写高性能的客户端Java代码
  12. CSS3-flex弹性布局之flex属性
  13. Android开发之Activity
  14. spring cloud(断路器——初学四)
  15. Windows2003 内核级进程隐藏、侦测技术
  16. k8s (kubernetes) 代码分析
  17. [VC6,VC9] [ts,nts,deb] [rpm,msi] 你需要下载什么格式的文件
  18. python对ftp进行操作
  19. 越狱的 ios 如何 获取 读取 提取 手机上的 短信 通话记录 联系人 等信息
  20. web开发中的安全问题

热门文章

  1. 每个新手程序员都必须知道的Python技巧
  2. 给老师安排课表JAVA项目及登录窗口的实现
  3. 自己写的Weblogic的poc
  4. 解决window.onload延迟加载问题
  5. asp.net core 3.0 中使用 swagger
  6. 算法学习之剑指offer(二)
  7. shell读取文件写入新文件
  8. JSON:JSON对象和JSON数组混排的复杂字符串
  9. window 后台运行的应用程序点击没反应
  10. [NOIp2010] luogu P1514 引水入城