最近又新做了三个Loading,不多，但都是自己原创的，代码现已上传了，有爱好的小伙伴能够clone下来看看，下面就介绍下这三个Loading的制作过程，相同的，咱们能够挑选感爱好的loading来看。

源码地址

万花筒loading

这个loading看起来花里胡哨的，其实做起来仍是蛮简单的，首要是用到了BlendMode这个参数，老规矩，咱们制作动画第一步，首要将需求的变量创立好

画布的宽width,画布的高height，以及圆周运动必需品中心点坐标centerX与centerY,接着来做几个绕着中心点转圈的圆，咱们知道画圆首要的便是确定好它的center的位置，center便是个Offset，所以这儿创立个数组用来寄存这些圆的Offset

offsetList便是用来寄存Offset的数组，pointX与pointY是经过半径，中心点，视点来核算目标点坐标的函数，不多做介绍了，源码里边有，这儿能够看到总共有十个Offset，对应了十个圆，每个圆的圆心距离中心点坐标60f,圆与圆之间的视点偏移量是36f,刚好平分整个圆周空间，咱们接下来遍历offsetList来将十个圆画出来

咱们看到圆的半径竟然也要50f,那画出来的作用不就十个圆根本挤在一同了吗，咱们看下作用

底子就看不出来圆嘛，其实这个才是咱们想要完成作用的第一步，先将圆都堆叠在一同，接下来便是主角BlendMode上台了，或许有些小伙伴对这个还比较陌生，没见过啊，其实它在咱们运用DrawScope里边的api的时分就现已呈现过了，根本每一个drawXXX的函数的参数列表里边，最终一个参数就有它的身影,比方在这儿要运用的drawCircle函数里边

咱们看注释里边的Blendmode的描述便是Blending algorithm,一种混合算法，也便是在制作时分将制作的图形像素与Canvas上对应位置的像素进行混合构成新的像素,类似于传统Android里边的PorterDuff,根本PorterDuff里边的形式Blendmode都有，一同Blendmode还有一些自己的形式，其中引起我注意的便是Plus形式

咱们能够看到注释里边对这个形式的描述是堆叠部分的像素的透明度会降低，也就看起来像是该部分的色彩变深了相同，那么关于咱们demo中十个圆刚好便是处于堆叠状况，咱们运用这个形式会呈现什么现象呢，来试试看

怎么感觉没啥改变？其实是有改变的，Plus形式的注释或许看起来比较难以了解，其实最好了解的方法便是从这个形式命名自身出发，Plus形式意思是加形式，便是将两个堆叠涂层的十六进制色值加一同，而咱们这儿用的是Color.Red,色值为0xFFFF0000,扫除前面的透明值通道，这儿便是首要对两个FF0000进行十六进制的加法，算出来的结果如下所示

得到的是FE0000,可不就仍是赤色嘛，尽管色值不同，可是用肉眼天然无法差异开来，咱们再看看将FE0000与FF0000相加得到的是什么

FD0000，色值不同但依然仍是赤色，所以这儿的例子咱们不能用Color.Red，换个色值试试，比方FF1D1D这个色值，再看看作用怎么

咱们看到堆叠部分的色值现已发生了改变了，多次堆叠往后，全体就看起来像一朵红花相同，那么咱们现已给十个堆叠的圆加好了混合形式，由于做的是万花筒作用，所以色彩得多一些，这儿再多加几个色彩，而且守时切换

比方这儿有六种色彩，接着运用循环动画不断取这个colorList的下标值，然后经过animateColorAsState函数切换下标值对应的色彩，代码如下

将color作为制作十个圆的色值往后，作用就出来了

作用怎么？咱们接着再给这十个圆加点动效，比方绕着中心滚动，而且十个圆与圆心距离有个渐近渐远的过程，那么再新建两个循环动画

然后再将diffAngle与diffDis这俩值参加到核算十个圆的Offset的数组当中

咱们这个万花筒的Loading作用就做出来了，最终作用图如下

滚动的蜂窝碎片

这个是从上一篇蜂窝墙那里做完往后想到的，咱们制作蜂窝墙的时分，制作规模是铺满整个画布的，蜂窝墙全体其实便是个长方形，所以咱们能够经过等分画布宽高来找出坐标点来制作一个个蜂窝格子，可是如果是要画其中一小部分，就要用另一种方法，从中心向外画，咱们来看下怎么做，首要仍是将一些必要的变量创立出来

根本跟上面的万花筒相同，多了一个sideWidth,表示一个六边形的边长，多了三个list，xList和yList是用来寄存所有需求制作的六边形的中心点，anglist是制作六边形六条边的时分需求的视点，pathList是寄存需求制作六边形需求用到的Path，那么先在中心位置画一个六边形来练练手，在xList与yList中别离放入中心点坐标centerX与centerY,然后经过遍历xList在Canvas中将每个点对应的六条边画出来，代码如下

中心这个六边形画好了，然后给这个六边形的六条边对应的方向也画上六边形，那么第一步，算出周围六边形的中心点与现已画好的六边形的中心点之间的距离，咱们用勾股定理就能得出

然后是六个中心点的视点

现在就能够在xList与yList中加入六个点的坐标了

由于之前就现已在Canvas中加入了遍历xList制作六边形的代码了，所以这儿直接就能获得别的六个六边形

一个小的蜂窝碎片就做出来了，简单不，咱们持续添加些坐标，把这个蜂窝碎片弄的大些

接下来便是上色了，上色的第一步仍是先填充满蜂窝的小格子，也便是需求制作一些六边形款式，这儿创立一个pathList来寄存制作六边形需求的Path,然后遍历xList或许yList来生成一个个Path再add到pathList里边去

然后在Canvas中遍历生成的pathList，并运用drawPath函数制作出一个个六边形

作用就出来了，然后咱们多创立几个色彩，而且运用animateColorAsState函数来切换

在Canvas中将color作为制作六边形的色彩值，咱们就得到了一个色彩可变的蜂窝碎片

还剩余最终一步让这个碎片滚动起来，也便是让咱们的Canvas滚动起来，怎么滚动呢？就需求用到Modifier的一个操作符graphicsLayer，它里边有操控x,y,z轴滚动的参数，别离是rotationX，rotationY，rotationZ,比方咱们想要让它绕着x轴转圈，那么就需求有个0到360度改变的动画过程

然后将canvasAngle赋值给graphicsLayer的rotationX参数，咱们的碎片就转起来了

咱们还能够把canvasAngle作用在roatationY和rotationZ上面，让它再其他方向也有滚动的作用，不过这儿计划再新建两个滚动的变量，目的是让这三个方向滚动的视点速率都不相同，代码如下

滚动的几何图形

说实话这个能不能叫Loading我也不知道，只是忽然有个主意想试试看，之前画过几个贝塞尔曲线，但都是倾向简单的，一根两个组合在一同运用的那种，那么如果是许多根贝塞尔曲线在一同，会有什么作用呢，所以就试了一下，一些准备工作就简单带过了，直接上代码

咱们知道画贝塞尔曲线需求几个操控点，三个操控点构成一个二阶曲线，四个操控点构成一个三阶曲线以此类推，咱们这儿依照操控点顺序别离命名为P0,P1,P2….那么如果在一个圆周上，有count个点作为P0点，在别的一个圆周上也有count个点作为P1，然后相同在别的一个圆周上有count个P2的点，最终将每个圆周上对应下标值的点组合成一个二阶曲线，咱们看看会呈现个怎样的图形

count是需求制作的曲线个数，unitAngle是圆周上的点距离的单位视点，baseRadius是P0点的圆周的半径，后面的圆周的半径都是在baseRadius上做添加或削减，然后新建了六个list，别离寄存P0,P1,P2的xy坐标，咱们能够看到核算P1,P2点的坐标的半径与视点都与P0有一些差异，然后新建一个pathList用来寄存二阶曲线的Path,然后在Canvas中遍历这个pathList将所有Path制作出来

这儿在制作的时分还加上了混合形式，目的是让堆叠的当地色彩能够变换一下，达到全体立体的感觉，作用便是下面这样

这是咱们画二阶曲线的作用，这儿再添加一组操控点，将二阶变成三阶再看看作用

跟上面的作用比起来又有点胀大的感觉，这儿咱们发现了，每一组操控点在核算的时分，视点那一部分该变量都是一个定值，比方it * unitAngle+80f, 那么如果咱们将这个定值变成一个可变值，会有什么作用呢？

比方这儿有一个60度到300度的一个改变动画，咱们将angleDiff代入到核算操控点的代码中

这儿给除P0外的操控点，在核算x或许y坐标中，横坐标对angleDiff做了除法，分母是操控点下标值加一，纵坐标对angleDiff做了乘法，乘上的也是操控点下标值加一，这些值都是自定义的，咱们能够依照自己喜好来定，现在运行一遍看看作用图

咱们就得到了一个会滚动的立体图形，这儿并没有像上面那个蜂窝碎片相同调用rotationX或许rotationY来完成立体滚动作用，而是让若干条贝塞尔曲线不断更改制作视点从而来完成这样的一种视觉作用，这样的思路或许会对往后做其他作用会发生一些协助，言归正传，现在画出来的是三阶曲线，那能不能在多画几阶呢，想看看多阶曲线能发生什么样的作用，能够的，很简单，再调用一次cubicTo函数就好了，那么咱们需求再多创立三组操控点

然后将这三组新的操控点代入到另一个cubicTo函数

就这样做出来了一点科技感的味道在里边，最终再稍微给这个作用美化一下，加点渐变色，别的给Path加点dashPathEffect的作用

最终一个好看但不有用的loading就做好了～

总结

这次做的三个loading作用虽说有用性不大，可是仍是用到了一些绘图的小技巧，比方混合形式之类的，或许会在往后的开发中对自己有所协助。