本篇文章已同步更新至个人公众号:Coffeeee

今年第一篇Compose动效开发，继续回归老本行，来一起做个Loading，老实说Loading动效个人已经做麻了，去年做了十几个，这次主要是想实现一个带火苗的Loading,因为之前看到过有位博主用Threejs实现过一个火焰的效果，然后又是职业病啊，想试试看用Compose实现一个火焰效果到底难不难

扩散效果

第一步，先别去想啥Loading，先想想火是啥样子的，颜色以红黄为主，也有蓝色的，绿色的，然后从火源开始逐渐向外燃烧扩散，那么这里首先就要想办法把扩散的效果做出来,先上基础代码

先创建出代表画布的宽高width和height，Canvas创建出来之后会得到宽高的具体值，然后宽高的一半就是画布的中心坐标centerx与centery,radius是整个Loading的半径，接着我们先随意在中心位置画一个实心圆

现在如果想要让这个实心圆动起来的话，通常会使用animateFloatAsState这个api，比如这里想要改变它的横坐标，可以这么写

也可以使用循环动画让圆点在那一直动

但是以上两种方式如果是作用在有限数量的视图上，是没啥问题的，但是像我们要做的这个扩散效果，有大量元素的，并且每个元素动画的轨迹方向都不一样，那么就不能使用上面这种动画api了，性能问题先不说，写起来也是个麻烦，所以得想个其他办法，那么既然不能用动画api来改变元素的位置，我们就手动改嘛，先来定义个model，代表每个元素，这个model有以下几个属性

其中

startX:代表元素初始位置的x坐标
startY:代表元素初始位置的y坐标
endx:代表元素移动结束后的x坐标
endy:代表元素移动结束后的y坐标
angle:代表元素移动的方向，也就是角度
dis:代表元素每次移动的距离
size:代表元素的大小，如果是圆就当作半径，如果是方块就当作宽高
color:代表元素的颜色

然后给Particle里面添加一些更新位置的代码，第一处在初始化函数中，目的是当Particle刚创建出来时候，根据startX与startY来计算出第一次位移的终点endx与endy

pointX与pointY分别是通过起点，角度，半径来计算终点坐标的函数，代码如下

除了刚才在初始化函数中加的代码之外，还要增加一个update函数，每次调用这个函数的时候，都会重新把上一次的终点作为起点，重新计算新的终点坐标，这样才能做到让元素移动的效果

这样我们Particle的基础功能就开发完成了，接下来就要去创建我们需要扩散的元素，由于数量较多，我们得循环创建这些元素才行，首先创建的事情我们放在副作用函数LaunchedEffect中进行

其中ANGLES表示0到360的一个范围，调用random()函数来随机取出一个值当作元素移动的方向角度，上述代码中还缺点东西，首先需要有一个数组来保存创建好之后的Particle,我们这里新建一个数组，将创建好之后的Particle添加到数组中

其次这个LaunchedEffect函数体由于key是true,所以无论重组几次都只会执行一次，那么我们的元素只会创建一次，而我们想要的效果是每过10毫秒都创建个元素，所以得把key值改成一个会改变的值，只有key改变了才会触发LaunchedEffect再执行一遍内部的代码，那么这个key我们就改成particleList这个数组的大小，每创建一个新元素，particleList的大小都会改变，改变之后下一次又会重新再去创建新元素，代码修改为

现在每过10毫秒，我们就会多一个Particle元素，但是现在只是创建了元素，元素还没动起来，要让它们动起来的话这个时候就要用到之前我们创建的update函数了，我们在重组的过程中遍历particleList中的元素，每个元素都执行一遍update,这样元素就动起来了

整个扩散效果到这里就算完工了，来看看效果咋样

定制扩散的样式

扩散的效果做出来了，但是可以看到现在是无限往四周扩散的，咱要做的火苗可不能无限扩散，那不得发大火了吗，所以得让我们这些元素扩散到一定范围之后"看不见"，在Canvas中让一个元素看不见除了不去绘制之外，就是让它的透明度为0，那么在Particle中再新增一个属性alpha来表示元素的透明度