[UWP]使用PointLight并實(shí)現(xiàn)動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)

1. Composition Lighting

UWP中的Composition Light是一組可以創(chuàng)建3D光照的API，它明明十分好玩而且強(qiáng)大， 但博客園幾乎沒(méi)有相關(guān)文章（用UWP或pointlight做關(guān)鍵字只能找到我自己的文章)，這篇文章就 來(lái)介紹Composition Lighting的入門(mén)知識(shí)。

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供大竹網(wǎng)站建設(shè)、大竹做網(wǎng)站、大竹網(wǎng)站設(shè)計(jì)、大竹網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、大竹企業(yè)網(wǎng)站模板建站服務(wù)，10余年大竹做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Composition Light有四種類(lèi)型：

• AmbientLight，發(fā)出出現(xiàn)的非定向光源的光源反射場(chǎng)景中的所有內(nèi)容。
• DistantLight，無(wú)限大遠(yuǎn)處的光源的發(fā)光的一個(gè)方向。 如 sun。
• PointLight，發(fā)出的所有方向光的光點(diǎn)源。 如燈泡。
• SpotLight，發(fā)出的光線的內(nèi)部和外部圓錐光源。 如手電筒。

這四種類(lèi)型的它們Composition Light分別使用Compositor的CreateXXXXXLight()函數(shù)創(chuàng)建，例如：

var pointLight = compositor.CreatePointLight();

上圖分別是SpotLight和PointLight的效果(其它兩個(gè)截圖沒(méi)什么好看的)。

2. 使用PointLight

使用PointLight最基礎(chǔ)的例子是WindowsCompositionSamples中的 TextShimmer 例子，下面用這個(gè)例子的代碼介紹如何使用PointLight。

首先把需要應(yīng)用PointLight的的TextBlock添加到UI，顏色為DimGray。

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

然后獲取這個(gè)TextBlock的Visual對(duì)象，用Compositor.CreatePointLight()創(chuàng)建PointLight，并且設(shè)置CoordinateSpace和Targets，這兩個(gè)屬性用于關(guān)聯(lián)Visual對(duì)象和PointLight。這時(shí)候TextBlock變成全黑，除非PointLight應(yīng)用到它的位置。

_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默認(rèn)是白色，而下面這段代碼實(shí)現(xiàn)Offset的動(dòng)畫(huà)。

Offset是一個(gè)Vector3的屬性，X、Y和Z代表PointLight的光源在三維空間的坐標(biāo)。首先將PointLight的Offset設(shè)置為T(mén)extBlock的左邊，垂直居中，Z為T(mén)extBlock的FontSize。然后啟動(dòng)一個(gè)一直重復(fù)的動(dòng)畫(huà)，以TextBlock的右邊為目標(biāo)水平移動(dòng)。

//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);

運(yùn)行效果如下：

3. 疊加Composition Light

Composition Light可以疊加，效果和光學(xué)原理一樣，即紅色加藍(lán)色會(huì)成為紫色，之類(lèi)之類(lèi)的。不過(guò)要注意的是除了AmbientLight外，其它光照只可以疊加兩個(gè)。

這樣就很有可玩性，例如下面這個(gè)動(dòng)畫(huà)：

4. 結(jié)語(yǔ)

上面的動(dòng)畫(huà)可以安裝我的番茄鐘應(yīng)用試玩一下，安裝地址：

一個(gè)番茄鐘

Composition Light玩起來(lái)真是一發(fā)不可收拾，更多示例可以下載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

網(wǎng)站題目：[UWP]使用PointLight并實(shí)現(xiàn)動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://muchs.cn/article4/dshsie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、ChatGPT、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)