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

[UWP]运用PointLight并完成动画结果

2019-11-18杂谈搜奇网27°c
A+ A-

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

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
[UWP]运用PointLight并完成动画结果

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

本文来源:搜奇网

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

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

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

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>