本文在Nukepayload2指导下,使用他的思想用C#写出来。
本文告诉大家,如何使用 win2d 做出萤火虫效果。
安装 win2d
安装win2d的方法请使用 Nuget 下载的方法,参见:win10 uwp win2d
下面先让大家看一下效果图再告诉大家如何做
创建界面
界面只需要很简单两句代码,第一句代码是命名引用,第二句代码就是添加 win2d
这里为何使用 CanvasAnimatedControl
而不是使用 CanvasControl
?因为需要进行更新,CanvasAnimatedControl
提供了一些事件,这些事件可以用来做动画。
后台的方法
在Canvas_OnUpdate
就写更新所有萤火虫的代码,在Canvas_Draw
就写画出萤火虫的代码。
萤火虫
于是开始创建萤火虫的代码,在创建之前,需要一个随机的类,这个类用于控制萤火虫的呼吸和移动,都是随机的。
在指定的范围之内,随机取一个点,这个点作为目的的点。于是当前的值就开始移动向目的的点,移动的过程存在速度。
从这里可以知道,这个类需要下面这些属性
其中 Dalue
就是速度,从 Value 到 To 的速度,这个速度在随时可以被修改。
下面是这个类全部代码
下面就是主要的类FireflyParticle
包含了位置和颜色,不同透明度,当然不透明度可以做呼吸效果,于是这些值都需要做随机移动
看到这,是不是觉得参数存在 time
无法理解?这里的使用 time 是为了在性能比较差的电脑得到效果和性能比较好的一样,虽然中途有一些没有显示的,但是计算结果相同,不会出现性能差的电脑,动画速度和性能好的电脑不一样。
动画
下面就是更新所有的值,创建属性FireflyParticle
用于放所有的类,因为很简单,我就不解释。
把所有的值都进行变化,就是在做动画,但是移动距离不能太长,移动的算法在上面的随机类写的,算法很简单,也不是关键,于是在这里就不说了。
核心代码
这里的核心就是画出来,如何在 win2d 画出一个点,把这个点高斯模糊。不知道大家知道 PhotoShop ,这里用到了图层,需要自己心中知道是什么东西。现在的图片一般都是很多个图片合成,于是可以把一个点作为一个图层,到时候把这些点合并就是上面给大家看到的图。
如何在 win2d 使用图层,主要的类是CanvasCommandList
用它就可以做出图层,最好使用DrawImage
把他弄出来。
如何对图层做模糊?在win2d有很多效果,先尝试把点画出来,效果图:
需要知道所有的效果都是可以直接画出来,我用的方法很简单,就直接写代码
如何要把图层画出来,那么修改Canvas_Draw
的代码
这个效果我放在 商业游戏 可以玩一下,代码开源https://github.com/lindexi/UWP/tree/master/uwp/src/VarietyHiggstGushed
参见:使用win2d实现萤火虫粒子效果 - Nukepayload2 - 博客园
原文链接: http://blog.lindexi.com/post/win10-uwp-%E8%90%A4%E7%81%AB%E8%99%AB%E6%95%88%E6%9E%9C
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
欢迎转载、使用、重新发布,但务必保留文章署名 林德熙 (包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我 联系。