经过上一篇文章的简略学习，咱们现已初步学会了怎么运用Compose来制造Loading动效，那么为了巩固这部分的知识点，这一篇文章咱们持续用Compose来做几个loading动效加深印象，篇幅较长，能够选取感兴趣的动效来看
源码地址
圆弧和圆
这个动效想不出叫啥，就随意叫了个，整个动画进程仍是蛮简略的，分两部分，一部分是两个圆弧绕着圆心做圆周运动，速度由快变慢，另一部分是中心有一个空心圆，空心圆的半径在做变长变短的循环运动，所以基本用两个循环动画就能完结，首要咱们需求界说动画需求用到的变量
centerX与centerY是动画的圆心坐标，radius是制作两个圆弧的半径，然后咱们再创立一个循环动画，循环的值是0度到360度
这儿咱们速度的改动是运用的FastOutSlowInEasing,为的便是让圆弧转圈的速度有个由快变慢的进程，接下来就在Canvas中将两个圆弧画出来
便是画了两个扇形，然后startAngle加上了angleDiff的改动值，两个圆弧就能转起来了，作用如下
接下来便是中心变大变小的圆，那也是个循环进程，咱们再创立一个循环动画，循环的规模在20f到60f的区间来回改动
circleSize便是咱们制作中心圆的半径，终究的作用如下
转圈的小球
这个动效跟上一个有一点相同的当地，那便是小球在绕着圆心转圈的时分，小球与圆心的间隔也是在一个区间规模里循环改动的，所以依旧需求创立个循环动画，其次不同的是小球在转圈时分，不是一直绕着圆心转，而是当小球在远离圆心的时分转个视点，再挨近圆心的时分，三个小球是不转的，这儿咱们采用的做法是做个动画间的时刻差，剖析好了今后仍是老规矩，先创立必要的变量
圆周运动少不了的中心点centerX与centerY,anglist是制作小球的视点，ballradius是每个球的半径，colorList是小球的色彩，首要创立个循环动画，动画的区间规模咱们界说为半个小球半径到四倍小球半径，代码如下
radiusDiff便是小球与画布中心的距离，经过pointX与pointY计算出某个视点小球本身的圆心坐标，最后用drawCircle函数将小球制作出来，pointX与pointY的代码如下
这个时分小球就能完成与画布中心间隔改动的动画了，看下作用
接着是让小球滚动起来，并且是在小球远离中心的时分才滚动，挨近中心的时分不转，要完成这个的话刚才咱们说了便是利用一个时刻差，咱们知道radiusDiff改动的时刻是单个方向500毫秒，所以小球单次滚动时刻也是500毫秒，然后下一次滚动的时刻就要在小球滚动的时刻上再加500毫秒，由于小球还有挨近圆心的进程，所以这儿用一个Flow来做一个守时器，守时触发小球滚动
diff每过一秒就递加90度的视点，angleDiff便是这个视点递加的动画进程，咱们将angleDiff这个变量添加到计算小球球心的进程中,终究整个小球的动画作用就完结了
又是转圈的小球
再做个转圈小球的动效，可是这儿小球与中心的间隔就不变了，是个定值，变得是啥呢？变得是小球本身的半径以及通明值，所抵达的作用期望是小球在转圈的时分，本身的半径由小变大然后在变小，通明值也是由浅变深再变浅，那么先将这个动效需求的变量准备好
centerX与centerY是画布的中心点，radius是小球做圆周运动的半径巨细，radiusList是小球本身需求改动的半径，然后既然是本身的半径由小变大然后在变小，通明值由浅变深再变浅，那么这个便是个循环进程了，咱们需求创立两个循环动画，并且repeatMode要界说成Reverse
index便是不断改动的半径List的下标值，alphaDiff便是不断改动的通明值，那么咱们能够先画出两个不转圈的，可是半径与通明值都会改动的小球了
然后便是要让小球绕着中心转起来，这个也是个循环动画，视点便是从0到180度，主要是动画时刻要留意下，由于之前半径与通明值单次改动进程咱们设置为1秒，然后由于这两个动画是Reverse的，所以完好的动画下来是用时两秒，所以咱们小球绕着中心转圈的动画也需求设置为两秒
然后将制作圆用到的视点换成angDiff，留意两个圆设置的视点必须是相反数，这样转圈时分才能够绕着相反方向转圈
这样一个完好的动效就做好了，看下终究版
跳动的心
这个动效需求考虑两部分，怎么画一个爱心和怎么让爱心跳动起来，一个爱心假如单纯的想一笔画出来，可能没有这样的api提供给咱们，可是能够脑补一下，假如将一个爱心从中心分隔开来，那是不是就等于画两个三阶贝塞尔曲线呢，所以咱们榜首步就要确定好贝塞尔曲线的操控点，咱们假如将画布分割成3 * 3的网格布局，那么咱们的操控点就在下面这几个方位
知道了操控点的方位，咱们就能将两个曲线的Path创立出来
再制作到画布上今后，咱们就得到了一个赤色的爱心
爱心画出来了今后就得考虑下怎么让爱心跳动起来，跳动其实便是改动一下制作爱心用到的操控点的坐标，假如一切操控点在一个坐标区间里边循环改动的话，那么看起来这个爱心就有个跳动的作用，所以先创立个循环动画，动画的改动规模是0f到15f
然后将这个改动值diff代入到创立Path的对应坐标里边，代入后的代码如下
现在再运转一下后，就得到了一颗跳动的心了
给心加点色彩的突变，让心看起来能够略微立体一些,就得到了最后的作用
七彩螺旋
这个作用最主要的便是知道怎么画一个螺旋，其实螺旋便是若干个，圆心离中心点逐突变大，滚动的视点也逐突变大的圆组合起来的样子，所以要画螺旋的话，首要就得要有一切半径以及滚动的视点
radiusList存放着一切与圆心的间隔，anglist保存着一切滚动的视点,咱们能够经过遍历任何一个数组，获取视点以及与圆心的间隔，然后计算出对应圆点的中心坐标值，等一切圆点画完之后，便是咱们要的螺旋
pointX与pointY咱们现已熟悉了，便是计算圆点中心坐标的函数，不多讲了，运转后得到一个静止的螺旋款式
然后咱们得让这个螺旋转起来，这个也简略，让每一个圆点视点不断添加一个0到360改动的值，那么全体螺旋就转起来了，先创立一个0到360循环动画
然后再将每个圆点的视点加上改动值diff，螺旋就转起来了
然后便是给螺旋染色了，染色的方式也是经过遍历一个色值的数组，然后从数组里边不断拿出色彩显示在螺旋上，显示的时分咱们再用animateColorAsState函数给色彩与色彩切换的时分加上一个动画过渡的作用，这部分的代码如下
这儿相同也是创立了一个下标遍历的循环进程colorIndex,然后用colorIndex从色彩数组colorList中获取色彩，终究咱们将colorSet设置到螺旋后的作用如下
辐射作用
这个作用是之前无意中看到一个辐射的标志牌，然后在这个款式的基础上做了个修改得到的，一般性辐射的标志款式都是中心一个圆，然后四周三个扇形围绕着这个圆,像下面这个图一样
咱们这儿稍作修改，将实心扇形用几个扇形圆弧来代替，并且每秒钟从最里边的圆弧朝外变换色彩，中心的圆展现的色彩也与圆弧展现的色彩保持一致，全体也是在顺时针滚动,首要创立需求用到的变量
colorList是要展现的色彩色值，radiusList是制作一切圆弧的半径巨细，anglist用来保存需求滚动的视点,经过这些咱们能够将圆点与一切圆弧画出来，代码如下
一个辐射标志就出来了，现在要让这个标志转起来，咱们在榜首个动效里边就做过相似的事情，要让圆弧转起来那么便是不断改动startAngle的值，而anglist里边保存的便是一切需求滚动的视点值，咱们只需求不断从anglist里边拿出对应视点加到startAngle上就好了
angleIndex便是一个anglist下标值不断循环改动的动画进程，然后再更改下制作圆弧的代码，让startAngle加上对应下标值的视点值，就得到了一个会滚动的辐射标志
然后便是给圆弧以及圆点染色，这儿也给colorList的下标值创立一个循环动画进程colorIndex，让colorIndex与圆弧半径相同的圆弧才能亮起对应的色彩，并且略微加粗一点，其余圆弧依然是白色，这个进程的代码如下
中心的圆球也要改动色彩，当圆弧亮起哪种色值的时分，圆球也展现相同的色值，那么这个简略了，由于咱们有colorIndex,只需求给圆球设置colorIndex对应的色值就好了
终究作用如下
起浮的n * n圆点图
这个作用是在一个n * n的网格布局里边，画(n-1) * (n-1)个圆点，然后逐一去改动每个圆点的巨细，首要咱们先将这些圆点画出来
xUnit和yUnit为横纵方向上单元格子的巨细，而每个圆点的半径radius便是这俩值的最小值的三分之一，然后再创立两个存放每个圆点中心x坐标与y坐标的List,分别为xList与yList,最后再遍历这儿啊list之后，画出一切的圆点
画完点之后，就要想一下怎么让这些点起浮起来，既然是起浮，那肯定是几个点一起动起来看起来才像是起浮，所以得找出这些一起动的点，咱们先看下下面的图
这图啥意思呢？意思便是每一根斜线经过的圆点便是需求一起动的，这些点之间也存在着一个规则，那便是从榜首根斜线开端，所经过的点的xy坐标相加是一个固定的值，然后每一根线依次下去，这个值都会添加1，比方榜首根线的点，xy坐标相加为0，第二根斜线的点，xy相加为1，最后一根线的点，xy相加的值就为(n-1)+(n-1),然后咱们就能在遍历list的时分，经过判别xIndex与yIndex相加为某一个值来划分圆点动画的最大规模，在咱们demo中是一个4 * 4的圆点图，那么一切斜线上圆点相加的值的规模便是0到6，咱们能够经过一个循环动画来循环找出当时动画的最大规模在哪一个值上,再让每一个点的xy坐标相加的值与最大规模的值相减，得到的值取绝对值再除上10，那便是每一个点的缩放巨细份额，假如得到的值大于1，那就保持不变，烦琐了那么多，其实代码没多少，咱们看下
咱们看到target便是创立出来的循环动画，得到的值便是当时最大规模的值，在循环体中与每一个点的xy坐标相加得到的temp进行相减，终究得到的tempAlpha便是点的缩放份额，在制作圆点的时分，将这个缩放份额作用在半径与通明值上，咱们终究的起起浮效就完结了
跳动的小球
这个动效是将画布分红若干份，每一份都有上下两个小球，上面的小球逐步缩小自己的y轴高度，下面的小球逐步添加y轴高度，这个进程也是循环的，首要创立需求用的变量
xList便是一切小球的x坐标，colorList便是一切小球的色值，然后在画布中将上下两排小球画出来
看到第二排小球带了点突变和通明，为的是让第二排小球看起来有点像榜首排小球的倒影一样，得到的作用如下
现在咱们让小球动起来，也便是在y坐标上加上一个无限改动的值，代码如下
创立了一个0f到60f无限改动的动画进程diffIndex,然后在遍历xList的进程中，将diffIndex与index * 10f相减，得到的值的绝对值便是小球高度的改动值,作用如下
转圈的彩虹
这个作用是之前在网上看见他人用CSS完成了一个，彩虹的话之前我也画过，可是转圈的并且每个弧滚动的速率还不一样的彩虹还没画过，所以这儿也准备用Compose来完成一个试试看，先将画彩虹需求的变量创立出来
singleWidth是单个彩虹弧的宽度，gap是彩虹弧之间的距离，colorList是一切彩虹的色彩，circleRdius是最大彩虹弧的半径，然后就能遍历colorList来把七个彩虹弧画出来了
接下来是让彩虹转起来，让圆弧滚动的操作咱们现已做了很多遍了，便是无限改动startAngle的值，所以这儿再创立一个0到360无限改动动画进程
然后再把start传到drawArc的startAngle参数里去，彩虹就能动起来了
动起来了今后，就要在上面加点作用了，现在每条彩虹弧都是一起开端旋转的，用的都是start的动画值，现在咱们想让最外面的先转，接着是第二个，然后第三个以此类推，那么这个时分每一条彩虹弧都需求一个动画变量了，这儿再创立六个
能够看到，新增的六个动画变量与最先创立的那个唯一的不同点便是多了个推迟发动的参数，然后总的动画时刻都是1500毫秒，这样就能保证每个彩虹弧发动时机不同，可是都是一起完毕旋转的，咱们把这些新增的动画变量添加到制作彩虹的代码中
这儿现已依据不同的下标值运用不同的动画变量了，咱们再看下作用
能够看到由于添加了推迟时刻，每个彩虹弧的发动时刻都不同了，那么再加个作用，有推迟那么也会有走过头的作用，咱们让每个彩虹弧在完毕转圈的时分，都会有个超出终究值的进程，然后再回到终究目标值，怎么做呢？咱们需求将InfiniteRepeatableSpec里边的AnimationSpec从TweenSpec换成KeyframeSpec,然后KeyframeSpec能够设置在动画时刻内的某一个时刻点，抵达一个比目标值还要大的值，然后在动画时刻完毕的时分，在抵达终究目标值，所以咱们将刚刚七个动画变量更改一下
每个动画现在都设置了KeyframeSpec了，现在再看看作用
总结
这些动效有的是网上看见他人用CSS完成，然后自己用Compose仿制了一个，有的是自己没事琢磨出来的，这几个都没用Modifier提供的动画操作符去完成，都是用的Canvas加Compose的动画api去做的，相信假如看完这篇和上一篇文章的小伙伴，在Compose的项目中假如遇到那些不是太复杂的动画需求的时分，都能够不必问设计师要切图，自己去用代码完成了，靠谁不如靠自己是不？
