像素点这个词对于前端来讲可能与UI设计师们打交道的时分用的会比较多一些，比如两个控件之间间隔多少个像素，这个文字离容器边距多少个像素，这儿的像素一般是以一种衡量单位而存在，那咱们有没有试过将像素点作为一个个小的控件来运用呢？让每个像素点可以变大变小，色彩可以变深变浅，那么今日这个文章咱们继续在Compose DeskTop上来带咱们看看像素点的另一种玩法。

画出像素点

首要咱们在Canvas上画出一切像素点，下面是画像素点所需求的变量

• screenW:画布宽度，在Canvas中经过Size实时更新
• screenY:画布高度，在Canvas中经过Size实时更新
• gridCount:宽度或许高度上需求分出的像素数量
• xUnit:单个像素的宽度
• yUnit:单个像素的高度
• pRadius:需求制作的小圆点半径
• xList:一切制作出来的小圆点的x坐标
• yList:一切制作出来的小圆点的y坐标

然后在Canvas里边遍历xList与yList这两个调集，将一切小圆点都画出来，怎样画的咱们都很了解了，运用drawCircle函数

前方密恐福利～

咱们现已获得了一堆小黑点，现在咱们来测验下更改一些小黑点的通明值，比如从我点击某一个方位开端，该方位的通明值最小，然后逐一向外通明值变大，直到通明值变成1停止，代码如下

这儿新增两个变量tapX与tapY用来保存点击方位的x坐标与y坐标，在循环遍历的代码里边，新增了xdis与ydis两个变量表明通明值，而且从点击方位开端向外递加通明值逐一变大，到第十个黑点的时分通明值就变成1了，当屏幕点击今后，xdis与ydis同时都小于1的点在制作的时分都设置通明值alpha,否则就不设置通明值，下面是作用图

圆点的通明值现已从点击方位开端向外变大了，咱们再用相同的逻辑，让圆点的半径逐一向外变大

这儿就做了一个小改动，将半径去乘上方才算出来的通明值，让那些变通明的圆点同时也能有一个巨细上的改动，咱们再看下作用图

可以看到咱们的小圆点现已呈现出向外分散，而且在色值与巨细上都有了必定的改动，可是如果说分散的话这儿还看着有点别扭，由于一般的分散都是以一个圆形的形状分散的，而这儿是正方形，所以咱们得想办法把这个正方形也弄成圆形，怎样弄呢？那就要改动一下核算通明值与半径巨细的方法了，之前是按照向外分散经过的圆点个数来逐渐改动圆点的通明值与半径巨细的，要害代码是这俩句

那么这种核算方法肯定是斜着的方向分散的间隔要大一些，所以咱们不能再约束个数了，而是约束一下分散的间隔，也便是将这个分散的圆的半径得先确认好，比如变量circleSize便是这个分散的半径

然后咱们需求做的便是核算出两点之间的间隔除上这个circleSize，得到的值如果小于1那么便是咱们需求的通明值，大于等于1咱们就正常处理，这儿唯一需求琢磨的便是如何核算两点之间的间隔，四个字，勾股定理

最终一步开根号kotlin里边有现成的函数sqrt,那么核算两个小圆点之间的间隔以及通明值的代码如下所示

接下去只需求将画圆点的通明值设置成div以及半径去乘上div就好了

咱们看到作用图上分散的区域现已变成了一个圆形了，到了这儿咱们像素点的首要玩法就讲完了，接下去便是利用上面讲到的知识点，来做一个开灯关灯的作用

关灯后的作用

关灯后一般都是漆黑一片，但模糊还能有点能见度，所以咱们这儿的黑也要带点通明度，然后圆点的个数也要增多，要让单个圆点变得不明显，所以gridCount首要增加到300

然后将非分散区域的背景色调成有点通明的黑色，而且增大圆点半径值，意图是去除圆点之间的空隙,分散的圆点的背景色也设置成带点通明，而且半径在乘上div的基础上再减小一点，意图是加强分散区域的灯火朦胧感

制作电灯，确认分散中心方位

到了这儿，分散区域的代码暂时先告一段落，咱们将电灯制作出来，后边电灯的灯泡就作为咱们分散的中心区域，制作电灯都是些根本Canvas绘图技巧，不多做介绍，直接贴上电灯的代码

drawCircle函数用来画灯泡，灯泡的中心点便是咱们分散的中心坐标tapX,tapY,函数drawline是画的电线，函数drawArc是画的罩在灯泡外面的灯罩，另外tapX,tapY的详细值就从点击获取变成了一个固定值

整个电灯的代码就完成了，作用如下

调节电灯亮度

当咱们在生活中调节灯泡亮度的时分，灯泡的亮度会越来越亮，色彩会越来越深，那么这边如果要完成这一点的话，就需求确认一个最亮值以及最暗值，然后经过函数animateColorAsState来创立个色彩过渡的动画进程

lightState是这个开关灯的状况，作为当时所在的函数的入参从上层传进来

咱们在最外层Window函数里边树立个菜单项，增加两个选项开灯与关灯，用来操控lightState的值

有了切换状况的开关，就敞开了色彩过渡的动画，灯泡的色值就用lightColor来取代

调节灯火分散区域巨细

灯火亮度可以有个由弱到强的进程了，那么灯火的分散规模也应该有所改动，而上面咱们现已知道了，操控分散区域巨细的变量便是circleSize,所以咱们只要经过改动circleSize就能达到改动分散规模的意图了，这儿相同也创立个circleSize的过渡动画

然后咱们更改下制作分散区域的条件，之前是将div小于1作为制作分散区域条件，现在就不需求加这个约束了，由于灯火照耀的规模肯定是整个窗口规模，所以最终分散的区域必定是到窗口以外的地方，可是制作的条件仍是有的，那便是circleSize大于最小值的时分，所以最终的代码如下

至于为什么不将判别条件设置成判别开关的敞开状况是由于当开关封闭的时分，窗口一下子就变黑了，这儿也期望封闭时分也有一个过渡的作用，咱们看下现在的作用

开关灯的作用就做好了，现在咱们可以找一张看书的图片，然后在最外层用Image组件展现出来，那么开灯看书的作用就做好了

源码地址

总结

最近在各种琢磨怎样做点好玩的动画作用出来，感觉在Compose里边做动效比在Android View里边简略多了，比如像这篇文章里边说到的内容，是不是改一改，一个水波纹作用就出来了，再改一改，一个数据加载完今后的转场作用也出来了，咱们也可以在自己项目里边着手试试看