今年没有买烟花，但是看了不少别人放的烟花，有些烟花真的是好看，现在年也过完了，该放的烟花也全都放了，差不多要上班了，那么我也趁这个时候，用Compose做个烟花，为新的一年来个开门红
分析烟花特征
做动效前脑子里要有个具体目标的，想好自己要的是什么效果，而不是随意去做，那么今天要做的烟花需要具备以下几点
- 数量不限：谁家买烟花也不会买个单响，高低也得多放几个才看的过瘾
- 扩散：烟花升空了肯定要炸开，不会炸的叫信号弹
- 路径是抛物线：炸开后虽然速度很快，但因重力影响，方向会有改变，会呈抛物线形态
- 逐渐消失：火药在空中烧没了，烟花也就越来越小，越来越淡了，最后消失了
- 颜色不同：好看点的烟花每次放出来颜色都不一样，酷炫一点的单个烟花里面颜色也不一样
好了就这么多了，下面来一个个去实现它
数量不限
要做到数量不限，我的实现方式是每次在界面上点击一次，该位置就生成一个烟花，为此这里需要定一个烟花的模型
这个Fire里面现在只有坐标点，接着我们需要做的是在界面上每点一次，就创建一个Fire并且塞到groups中，监听点击的事件就交给onPointerEvent函数
Fire的坐标是通过获取event.changes.first().position来拿到，表示当前点击的坐标，然后将groups里面的Fire绘制出来即可，暂时以红点表示
到这里，就实现了在界面上每次点击就生成一个红点的效果了
然后需要给Fire再添加个属性alpha表示透明值，用来降低每个生成后的红点的透明值，来达到淡化的效果
实现淡化就是不断降低透明度的过程，所以需要一个循环体，每一次降低的透明度用fadeSpeed来表示
上游用来改变每个Fire的属性，下游用来将改变后的数组赋值给groups来触发重组，淡化的效果就出来了
扩散
之前画了一个点，表示烟花上升后炸开前的位置，那么接下去就是实现炸开的效果，也就是将现有的点扩散出去，那么不得不扩充一下Fire的属性，新增一个数组表示每个扩散分支的终点
扩散分支endPoints里面每一个分支用SingleFire来表示，可以看到SingleFire内部暂时定了两个属性，offset表示终点坐标，radius表示与扩散中心点的距离，size代表每个分支烟花的粗细，默认设置了一个随机值，当点击的那一刻，endPoints也必须初始化出来，初始化的值就是以扩散中心为圆心，radius=0的圆周上的点，对了，还需要定义一个分支数目以及各个分支的角度
pointX与pointY是计算圆周上坐标的函数，在之前写的动效文章里面出场次数还是蛮多的，翻旧代码找来了，那么endPoints的初始值也有了
给endPoints赋值的地方就在LaunchedEffect里面，在改变透明值的同时，也增加radius的大小
一边增加扩散的半径，一边将分支给绘制出来，绘制的代码要改下，从drawCircle改成drawLine,drawLine的参数值我们都能拿得到
这样我们的扩散效果也基本完事了
抛物线路径
现在该想想怎么让烟花扩散的每条路径呈现抛物线的样式了，首先一点是肯定的，刚用过的drawLine肯定是不能用了，它画不了弯的线，那么谁可以画弯的呢，必须是drawPath，用它来画贝塞尔曲线真是太顺手了，咱先在SingleFire里面把用来绘制贝塞尔曲线用到的Path声明出来
在副作用LaunchedEffect函数中，需要新增创建Path的逻辑，其中第三个控制点的值暂时与第二个点一致,代码如下
最后在drawScope中，使用drawPath将需要的贝塞尔曲线绘制出来
呈现的效果如下
看起来效果没啥变化，没变化就对了，因为组成我们每根烟花分支的Path目前基本在一条直线上，自然绘制出来的贝塞尔曲线也是直线，只需要将第三个点改个位置就行，怎么改呢？我们知道所有第三个点也都在一个圆周上，所计算的角度与第二个点是一样的，只需要将第三个点的角度稍微增加或者减少一些，那么所有的点的位置就改变了，比如都加个30度
那么现在的样子就不一样了
好了，现在来做两个调整，一个是抛物线拐弯的弧度，应该也是个逐渐增大的过程，扩散的瞬间，其实弧度就是0，然后受重力逐渐变大，那么在SingleFire里面需要一个属性来表示抛物线弧度的属性
sweepDegree就表示当前抛物线的弧度，改变的过程其实可以参考透明度或者扩散半径那样做
另一个调整，这个烟花现在有点"顺拐"，现在抛物线拐弯的弧度都是按照顺时针来的，但实际场景中，烟花是朝四周扩散的，我们这个二维空间里面，也应该是有左右两个方向，所以不应该所有的弧度都是加上degree变量，其实想想也明白，真的要加上degree的是那些x坐标比初始值大的点，其他的都应该要减去degree才行，代码按照这个逻辑稍作调整
我们要的抛物线效果就做好了，效果看下
逐渐消失
烟花消失的样子也可以分成两部分，其中一个是炸开后从中心向外开始消失，所以我们做的烟花的起始位置就不能是一个点了，而是num个点，也在一个圆周上,这些点的起始半径也都为0，在SingleFire中新增一个startRadius属性代表这个半径
同样在副作用中，逐渐去变大这个startRadius，然后将最新值拿来计算最新圆周上的点，代码如下
另一个要处理的是烟花每一条曲线上，当开始消失的时候，不是整根曲线一起消失，而是会分成若干个小火星，然后小火星也慢慢变小变暗，要做到这一点就要用到一个关键型函数 PathEffect.dashPathEffect,用来将一根线变成一根虚线的，这个函数里面第一个参数就是个float数组，数组里面会传两个值，分别代表虚线每一个线段的长度以及虚线之间的间距
而我们要做的就是将float数组中第一个值不断减小，第二个值不断变大，SingleFire中再定义两个属性代表线段长以及间距长
副作用里面的代码做如下更改
然后在drawPath中添加上PathEffect.dashPathEffect的处理
烟花消失的部分也做好了，看下效果
不同颜色
到了最后一步了，给烟花上色，正常放烟花的时候，每次放出来的烟花颜色都会不一样，而且单个烟花中颜色也不是只有一种，所以这里打算这么做，先弄一个颜色的数组
然后在给烟花初始化的时候，每一次都从这个数组中随机抽三个颜色组成一个新的数组，我们烟花每一个分支的颜色，都从这个新的数组中随机找一个来设置，先给SingleFire再添加一个color属性
初始化部分，通过shuffled函数把colorList打乱，再抽取最后三个颜色
赋值部分，shuffList中随机拿一个颜色出来赋值
绘制部分，使用Brush生成一个渐变色，singleFire.color与白色的渐变，这样可以让烟花看起来亮一些
看下最终效果
最后
烟花放完了，又要开始重新搬砖当牛马了，那我就借这篇烟花动效的文章祝各位看官在新的一年工作顺利，事业有成，天天发大财～