最近杂七杂八的工作一堆，遽然发现自己良久没有写Compose了，最近的一篇Compose相关的文章离现在差不多快要两个月了，这么一想可把自己吓一跳，那么长时间了可别把Compose的东西给弄陌生了呀，尤其最近又是ArkTS又是React的，都是声明式的语法又那么挨近，在不写点Compose估计就要不会写了，那么该写点啥呢？之前前前后后整了有十六个Compose的loading动效，发现做动效还挺有意思的，那么这次持续来做点动效吧，但不做loading了，做点进展动效来换换口味，打开IDE,开整～

准备工作

之前网上去搜了一下，这样的动效大多数都很千人一面，基本都是中心一个百分比数字，周围一个圆弧，从一个小圆弧变成一个完好的圆，这样整个动效就完毕了，有差异的也最多便是字体色彩，圆弧色彩，圆弧粗细之类的不相同，可是这样就很单调，咱们这次就来做点有意思的，不相同的动效来看看，首先不管是什么样的作用，咱都需求一些数据来表示进展，这个进展就用下面这段代码来完成

一个状态变量progress，这个变量便是用来保存当前的进展，而且作为LaunchedEffect的key,首次启动,LaunchedEffect会履行它内部的协程block,block里边是一个Flow,Flow的上游判别当前progress的巨细是否超过了100，超过了就从头置成0，没有超过的话就延迟200毫秒再emit个2到下流，下流拿到上游发送过来的数据之后，更新到progress上，然后从头触发LaunchedEffect履行新的协程block，就这样一个简单的改动进展的进程就做好了，后面只需求将progress传递给每个动效函数就好了，下面来做第一个动效

变大并旋转的圆弧

这个动效是之前在其他当地看到过，也是百分比跟圆弧的组合，可是圆弧除了弧度会变大之外，圆弧本身也会绕着百分比旋转，这边也来用Compose完成一下，因为要展现百分比数字，所以整个布局结构是外层一个Box,里边是一个Canvas和一个Text,Canvas用来制作圆弧部分，Text用来显示百分比，整个结构如下

Text直接展现的便是进展的值progress，然后将RollingArc函数在外层Window函数中调用后的作用就如下所示

然后因为项目用的Compose版本是1.5.1

众所周知，Compose在1.4的版本里边已经给文本组件添加了drawStyle特点，能够轻松给文本设置上描边作用，完成起来也很简单，只要在Text组件中设置了drawStyle特点就好，款式就在里边自界说

上面这段代码便是给Text增加了一个描边作用，其中边的粗细是3f,笔触设置为StrokeCap.Square,作用就像下面这样

文本现在就呈现出只有描边，中心是空心的作用，drawStyle还能够设置其他作用，比方给文本设置虚线作用之类的，但不是本文要点就不说了，大家有爱好能够测验下，咱们持续下一步，现在做好了百分比的跳动动画，然后便是外面的圆弧动画了，这个就要在Canvas里边运用drawArc函数来完成，咱们先随意画个圆弧，比方开始视点是0度，弧度巨细是90度，代码如下

这儿画了一个弧度粗细是30f,方位在左上角(0,0)坐标，巨细是100f * 100f的圆弧，大约的样子就像下面这样

现在要挪动这个圆弧，让圆弧的圆心刚好是整个画布的中心，那么圆弧就能绕着中心的百分比数字旋转的了，那么第一步，需求界说几个变量

代表中心点坐标的centerX与centerY,以及圆弧半径outRadius,有了这三个变量，就能够核算出当圆弧圆心在画布中心时分，topLeft的x,y坐标，代码如下

左上角x坐标便是centerX减去圆弧半径，y坐标便是centerY减去圆弧半径，而Size里边便是传入圆弧的直径，也便是两倍的outRadius，这个时分圆弧的方位就在画布中心了

接着便是动画部分，先让圆弧绕着中心旋转，这个很简单，让startAngle的值变成一个循环改动的动画变量就好

然后把start作为startAngle的值，圆弧就转起来了

圆弧转起来今后，圆弧的弧度就得跟着传进来的progress值动态改动了，直到progress值是100的时分，圆弧的弧度就变成360度，这儿progress与sweepAngle的转化联系是这样的

咱们把这个转化联系代入到drawArc的sweepAngle里边去,圆弧的弧度也就跟着progress一同改动了

这儿不知道大家有没有看清，这个弧度改动的进程中有点卡顿，主要原因是咱们sweepAngle的值改动的时分是从一个值直接到另一个值，没有一个过渡的进程，才会让作用看起来有点卡顿的样子，处理这个问题也很简单，咱们让sweepAngle也变成一个动画变量就好，运用animateFloatAsState函数来完成

这儿将progress * 3.6作为targetValue值代入到animateFloatAsState函数里边去,这样就得到了一个sweepDif的改动动画，咱们将sweepDif代入到sweepAngle里去后，再来看下作用

现在sweepAngle改动的时分卡顿的感觉就不是很明显了，而这个动效也基本完成了，剩下的工作便是美化工作，让百分比字体色彩与圆弧色彩跟着进展的改动有个色彩的过渡改动，要做到这一点的话首先需求一个色彩的数组

这儿创建了一个色彩数组circleColorList,长度巨细是11，为什么是11呢，因为咱们进展progress的取值是从0-100，这些数字的十位数是0-10一共有11个，每一个十位数假如要对应一个色彩的话，那么必定的咱们这个数组长度就必须设置为11，然后再运用animateColorAsState函数创建一个色彩改动的动画

能够看到这边的targetValue取的便是circleColorList里边的值，下标是progress/10，然后再把ringColor作为咱们圆弧与百分比字体的色彩，整个动效就多了一个色彩切换的作用了

这儿还给色彩加了点突变，最终整个动效就完成了

自界说进展款式

或许这儿会有小伙伴吐槽，你开头不是说圆弧的动效比较单调，看腻了吗，怎么自己反手就做了个圆弧呢？piapia打脸了昂，好吧。。刚开始手有点陌生，所以先做个中规中矩的热热身，接下来就开始做个有意思的，这儿从头再新建个函数

这儿相同创建了中心点坐标centerX与centerY,能够从函数名字能够看出，这次要做的动效是要去画线，当然这线不是去调用drawLine函数去画，而是画的是贝塞尔曲线，咱们都知道画贝塞尔曲线其实便是制作Path,所以咱们也要去制作Path,制作很多Path,所以先创建一个存放Path的数组

直接创建了一个巨细是100的数组，里边也创建了100个Path,可是并没有界说详细途径，因为不同的途径所展现出来的作用也都是不相同的，比方咱们这儿要画的曲线是二阶的，二阶曲线的首尾控制点都在一个圆上，第一个控制点比方是在圆的0度方位，那么最终一个控制点则是在相对于第一个点再经过90度的方位，至于中心的控制点，便是在比首尾点地点的圆更大的圆上，方位便是在0和90度之间，其他曲线也都这样的逻辑，仅仅控制点地点的方位的视点呈递加联系，大约的制作思路便是这样，咱们现在就来将这一百个曲线制作出来，因为有两个圆，所以再创建两个变量代表这两个圆的半径