提到进展动画，很多人脑海中肯定会呈现类似于一个长条的进展条，或许是一个圆环进展条，这种款式是现在比较常见的，但今天要完成的进展动效它并不像那种常见的进展条，而是只要一个百分比数字，数字周围会带有不断更换色彩的霓虹灯特效，而数字自身也运用的是像素字体的款式，接下来就看看这种动效是怎么完成的
源码地址
注：本篇文章进展的数据来历是与上一篇文章共用的同一段代码，假如想知道进展自身是怎么完成的，可以去上一篇文章里边检查
在指定规模内制作像素点
要完成霓虹灯作用的话，第一步便是将咱们的画布等分红若干个小格子，然后在每个小格子的交叉点方位制作小圆点作为像素点，下面是制作像素点所需求的变量
- screenW:画布的长度
- screenY:画布的宽度
- gridCount:水平或笔直方向上等分的数量
- xUnit:水平方向每一小格的宽度
- yUnit:笔直方向上每一小格的高度
- pRadius:像素点的半径
- xList:寄存一切像素点的x坐标
- yList：寄存一切像素点的y坐标
在Canvas里边，经过遍历xList与yList，可以将一切像素点都先画出来
终究得到的如下这个作用
不能看太久，看久了眼花，这么个眼花的东西咱们是在循环体内没有加任何判别画出来的，那么假如我只想在某一个详细规模内制作出一切的圆点该怎么做呢？比如在一个半径为40f的圆内制作点，其他地方不制作，这儿就要将代码改一下
这边先计算两点之间的间隔，运用了勾股定理，把画布中心点的x坐标与其他点的x坐标的差值的平方，加上画布中心y坐标与其他点y坐标的差值的平方，终究在用sqrt函数开根号，得到的值假如是小于40f的才去制作圆点，比40f大的就不制作，那么得到的作用是这样的。
咱们得到的就不是满满一窗口的白点了，而是一小坨白点，这部分白点离开画布中心间隔都是小于40f的，到了这儿咱们就现已能操控制作像素点的规模了，来进行下一步
改动像素点的半径与透明度
下一步便是去改动像素点的半径与透明度，肯定不是去设置某一个固定的值，而是要依照一种份额去改动，什么份额呢？刚刚咱们现已尝试了在一个40f为半径的圆内制作小圆点，这个时分的小圆点的半径是一倍的pRadius而且完全不透明，那么现在想要再往外40f的规模，透明度跟半径都下降十分之一，再往外相同的间隔，透明度跟半径都再下降十分之一，来看下代码
可以看到这儿将单个规模巨细的值提出来作为了一个变量circleSize,然后将一切的点与画布中心间隔radius除上circleSize,除出来得到的值假如不超过9就去制作点，这就相当于把整个制作规模分红了十份，每一份的透明度与半径缩小的份额在用下面if句子里边的第一行代码计算出来了，radio便是缩小份额，然后在drawCircle里边将半径乘上radio，而且把radio直接作为透明度，咱们想要的作用就出来了
作用是有了，但需求修改一下，因为要做的霓虹灯作用是从中间开始向外扩散的，而现在咱们做出来的作用是向内靠拢的，所以要将代码改一下
这儿稍作修改，将半径乘上的份额以及透明度从radio变成1-radio,而且把半径增大一倍，为的便是去掉圆点之间的空隙，现在感觉应该差不多了
看起来中间的好点了，但是比较靠外的规模内的圆点之间还是有点缝隙，那咱们再把半径增大一点吗？当然不是，真这么做的话作用上就会打折扣了，咱们可以给画布添加上一点含糊设置，运用blur函数完成
blur函数里边radius设置了3.dp,这个radius设置的越大，含糊的就越显着，这儿设置个3.dp就可以了，再来看下作用
现在是不是就像一个白色的光源在发光相同了，离终究霓虹灯作用越来越近了，还差一步美化工作。
霓虹灯作用
现在这个光的色彩现在还是固定设置成了白色，咱们可以根据传进来的progress参数，让发光的色彩跟随着进展来改动，先创立个色彩的数组用来切换
这儿打算传进来的进展每经过10个数字，色彩就变换一下，再加上终究进展到了100的时分也要有一个对应的色彩显现，所以咱们这个色彩数组lightColorList巨细是11，而当时展现的色彩便是lightColorList[progress/10],咱们可以直接经过访问数组下标的方式设置当时发光的色彩，就像这样
但是这么做的话色彩切换时分作用就会显的比较僵硬，最好的做法是切换的时分有个动画过渡的进程，所以这儿需求运用animateColorAsState函数生成一个动画变量lightColor,把lightColor设置到drawCircle函数里边去
添加了色彩切换的作用之后，整个发光作用就变得不那么单调了，现在再给这个发光的作用添加一个闪耀的动画，怎么闪耀呢？大家应该还记得咱们整个发光的规模是根据点到画布中心的间隔radius除上单个扩散间隔circleSize来决定的，circleSize越大，整个发光规模就越大，circleSize越小，发光规模就越小，比如咱们将现在circleSize从40f调到30f后，作用就变这样了
发光规模就变小了点了，依照这个假如咱们不断来回更改circleSize的巨细，那么是不是就有了闪耀的作用了呢？，方式便是将circleSize从一个固定的值变成一个循环改动的值，代码如下
创立了一个循环动画，将circleSize变成了一个循环改动的值，闪耀的作用就做好了，终究霓虹灯的特效也出来了
像素字体展现百分比
做完了霓虹灯作用，就得在这个霓虹灯上展现百分比进展了，其实简简单单放一个Text组件或许运用drawText来显现百分比也是可以的，而这儿运用像素字体的创意是首要来自于路旁边那些店肆商家门口的LED广告牌，那些LED牌子上展现的内容便是经过一个个发光的小格子拼起来组成的，那我这边也有小格子，不是也能完成下这样的作用吗,那就也来试试看，首要因为现在的画布现已用来制作霓虹灯作用了，所以这个像素百分比需求展现在一个新的布局上面，两个视图要叠在一同，所以外面还得在加一层Box组件，修改下本来的布局结构，便是下面这样
LED布局的父组件运用了Surface组件，Surface的shape属性还设置了CircleShape,为的是与霓虹灯发光的规模构成共同，接下来便是重点，怎么去完成像LED相同像素款式的字体，上面有说过LED是用发光的格子拼在一同，那在咱们这儿便是将若干个详细方位的格子设置上色彩，注意这儿用到了详细两个字，也便是说有必要清晰知道点亮某一个数字用到的一切格子的详细坐标，那么一个严肃的问题就来了，好家伙咱们这儿可是有一百个数字，外加一个百分号，全体都要在咱们的LED布局里边居中显现，也便是说就算是同一个数字，在不同的百分比里边所运用的坐标点都是不相同的，那我是不是要把一百个百分比数字的坐标都算出来？当然不是，思路来自于下面这张图
这是啥大家都知道，计分牌，我网上随意找的，计分牌怎么来表明一个比分的大家都清楚，将两个数字组合在一同就好了，那么咱们的思路不就翻开了吗，在一个LED布局里边显现一百个百分比数字是比较复杂，那么咱们假如将LED布局拆分开来，让每一个子LED布局只担任显现单个数字或许百分号，因为在单个LED布局里边，每一个数字或许百分号的坐标都是固定的，终究一个完整的百分比数字便是由若干个子LED布局拼凑起来构成，那不就完事了吗？好了，说了那么多咱思路也理清了，现在可以着手开发，首要创立一个新的函数来表明单个子LED布局
因为相同是要从画网格开始的，所以所用到的变量与制作霓虹灯用到的根本共同，不同在于gridCount变小了，变成了一个8 * 8的小网格，而在入参方面，除了必要的Modifier,还多了两个参数，一个是传进来需求变成像素字体的value,另一个则是像素字体的字体色彩，这儿相同先把一切小格子制作出来
然后在上面的Surface里边调用一下LedChild函数，就获得了64个小方格
这儿发现整个方格布局没在Surface组件的中间方位，其实这是正常现象，因为制作单个小格子的时分，每个格子的左上角坐标才是xList与yList里边的值，所以导致的成果才是全体看起来不是很居中，这些可以忽略的，有了这些方格之后，每个数字便是由这些方格里边的其中几个组合起来的，每个数字或许百分号都有自己对应的方格调集，这儿创立一个GridPoint类表明单个方格，里边维护着这个方格的左上角x，y坐标
在LedChild函数里边创立个Map，这个Map的key便是单个数字或许百分号，value便是一个GridPoint数组，比如说数字1,它的GridPoint数组便是这样的
Canvas里边的制作逻辑也要更改下，变成只遍历value对应的数组,将数组里边对应的方格制作出来
咱现在实验一下，在刚才调用LedChild函数的地方，将第二个参数从空字符串变成1，那么一个像素字体的数字1就呈现了
其他数字以及百分号都相同，都是经过数对应的格子算坐标，因为行数比较多也没啥技术含量，这些代码就不贴了，有爱好的可以把源码下下来看看，到了这儿咱们的LedChild函数的开发就都完毕了，一个LedChild函数相当于一块小的LED牌子，当咱们收到progress时分，需求将progress拆分红若干个个位数，外加一个百分号，每一个部分都别离对应一个LedChild，在Surface里边加上这样的逻辑，代码如下
这样一个用像素字体完成的百分比进展动效就完成了，看下作用
是不是有那感觉了，再略微美化一些，现在字体都是白色的，咱们让它跟周围霓虹灯运用相同的色值，也便是将lightColor传给每一个LedChild函数
这样咱们这个带有霓虹灯特效的进展动效就完成了，来看看终究作用
总结
本篇文章的动效制作全进程都现已介绍完毕了，希望大家可以喜欢，有任何主张或许观念观念的，也欢迎在谈论区留言。
