新年开工大吉：用Jetpack Compose手写一场绚烂的烟花秀

说实话，春节假期结束后的那种感觉，大家应该dou懂吧？那种“节后综合症”简直比感冒还难受。虽然今年春节我没买成真的烟花，但kan着别人在朋友圈里晒各种绚烂的烟花秀，心里还是痒痒的。现在年也过完了该放的烟花也dou放完了大家差不多dou要回去“搬砖”当牛马了。既然如此，我就想趁着开工这个节点，用Jetpack Compose在代码里放一场烟花，算是给新的一年讨个“开门红”的好彩头，顺便也祝各位kan官在新的一年里工作顺利，事业有成，天天douNeng发大财。

Zuo动效这事儿，Zui忌讳的就是没头苍蝇一样乱写。在动手敲代码之前，脑子里必须得有个具体的画面知道自己到底想要个什么效果。那么今天我们要Zuo的这个Compose版烟花，我给它定下了几个必须要实现的小目标：

烟花这东西，不Neng是写死的动画，必须得有交互。我的设想是在屏幕的任何位置点击一下那个位置就得立马炸出一朵烟花来。为了Zuo到数量不限，随时随地douNeng放，我的实现思路是定义一个烟花的数据模型，每次在界面上触发点击事件，就在当前坐标生成一个新的烟花实例，然后把它塞到一个列表里去统一管理。

这里我们需要先定义一个基础的Fire类，用来记录烟花爆炸中心的位置。这个坐标怎么来呢？hen简单，通过event.changes.first.position就Neng拿到当前点击的坐标点。为了方便调试，我们先不管花里胡哨的，就在groups这个列表里把所有的Fire绘制出来暂时用一个红点代替。这样一来运行一下代码，我们就Nengkan到，每次点击屏幕，对应的位置就会冒出一个红点，这说明我们的点击监听和坐标获取逻辑是跑通了。

光有一个红点肯定不行，那不是烟花，那是芝麻。烟花Zui核心的特征就是炸开。所以接下去我们要Zuo的就是实现炸开的效果，也就是将现有的那个点向四周扩散出去。

这就意味着我们得扩充一下Fire的属性了。一个烟花炸开后其实是由无数条光线组成的，我们在代码里不可Neng真的画无数条，但Ke以模拟出若干条分支。所以我给Fire新增了一个数组，专门用来表示每个扩散分支的终点。

这个扩散分支，我们用SingleFire来表示。kankan这个SingleFire里面dou有些啥：暂时先定两个属性，offset表示分支终点的坐标，radius表示这个分支距离扩散中心的距离。另外size代表每个分支烟花的粗细，这个Ke以默认设置一个随机值，让烟花kan起来geng自然一点，不至于太死板。

当点击的那一刻，endPoints必须得初始化出来。初始化的逻辑就是以扩散中心为圆心，radius=0的圆周上的点。对了还得定义一下分支的数量，以及各个分支的角度，这样才Neng铺满整个圆周。

这里有个老朋友pointX与pointY，这是计算圆周上坐标的函数，在之前写的动效文章里出场次数挺多的，我就把旧代码翻出来直接用了。这么一来endPoints的初始值就有了。

接下来就是动起来的过程了。我们需要一边增加扩散的半径，一边把分支给绘制出来。绘制的代码要稍微改一下从之前的drawCircle改成drawLine，因为我们要画的是光线。drawLine需要的参数值，比如起点和终点，我们现在douNeng拿得到。

在副作用LaunchedEffect函数中，我们需要新增创建Path的逻辑。这里有个小细节，第三个控制点的值暂时先跟第二个点保持一致，代码如下。这样我们的扩散效果基本框架就搭好了。

现在虽然Neng扩散了但效果有点生硬。因为目前我们画出来的dou是直线，像激光一样，这可不行。真实的烟花在炸开后受重力影响，下坠的轨迹是弯曲的。

这时候就得请出我们的老朋友——贝塞尔曲线了。 一点是肯定的，刚用过的drawLine肯定是不Neng用了它画不了弯的线。那么谁Ke以画弯的呢？必须是drawPath，用它来画贝塞尔曲线简直是顺手拈来。

我们得先在SingleFire里面把用来绘制贝塞尔曲线用到的Path声明出来。现在的样子kan起来没啥变化，没变化其实就对了因为组成我们每根烟花分支的Path目前基本在一条直线上，自然绘制出来的贝塞尔曲线也是直线。

怎么让它弯起来呢？我们知道所有第三个控制点也dou在一个圆周上，计算的角度与第二个点是一样的。我们只需要将第三个点的位置稍微改一下就行。比如dou给它加个30度，或者减少一些角度，那么所有的点的位置就改变了曲线也就出来了。

好了现在来Zuo两个调整，让效果geng逼真。一个是抛物线拐弯的弧度，应该也是个逐渐增大的过程。扩散的瞬间，其实弧度就是0，然后受重力逐渐变大。所以在SingleFire里面我们需要一个属性来表示这个抛物线弧度，我们Ke以叫它sweepDegree。

改变的过程其实Ke以参考透明度或者扩散半径那样Zuo，在动画循环里不断geng新这个值。

但是这里有个问题。现烟花是朝四周扩散的，在这个二维空间里也应该是有左右两个方向的。所以不应该所有的弧度dou是加上degree变量。

其实想想也明白，真的要加上degree的是那些x坐标比初始值大的点，其他的dou应该要减去degree才行。代码按照这个逻辑稍作调整，我们要的抛物线效果就Zuo好了效果kan下是不是顺眼多了？

到了Zui后一步了给烟花上色。正常放烟花的时候，每次放出来的烟花颜色dou会不一样，而且单个烟花中颜色也不是只有一种，五颜六色才好kan。

所以这里我打算这么Zuo：先弄一个颜色的数组，里面放各种好kan的颜色。然后在给烟花初始化的时候，每一次dou从这个数组中随机抽三个颜色组成一个新的数组。我们烟花每一个分支的颜色，dou从这个新的数组里随机找一个来设置。

具体实现上，先给SingleFire再添加一个color属性。初始化部分，通过shuffled函数把colorList打乱，再抽取Zui后三个颜色。赋值部分，就从shuffList中随机拿一个颜色出来赋值。

绘制的时候，也不Neng只用纯色。我们Ke以使用Brush生成一个渐变色，用singleFire.color与白色进行渐变，这样Ke以让烟花kan起来亮一些，geng有光感。

烟花消失的样子其实也Ke以分成两部分。其中一个是炸开后从中心向外开始消失，所以我们Zuo的烟花的起始位置就不Neng是一个点了而是num个点，也在一个圆周上。这些点的起始半径也dou为0。为了实现这个，我们在SingleFire中新增一个startRadius属性代表这个半径。

同样在副作用中，逐渐去变大这个startRadius，然后将Zui新值拿来计算Zui新圆周上的点。

另一个要处理的是烟花每一条曲线上，当开始消失的时候，不是整根曲线一起消失，而是会分成若干个小火星，然后小火星也慢慢变小变暗。要Zuo到这一点，就要用到一个关键型函数——PathEffect.dashPathEffect。这个函数是用来将一根线变成一根虚线的。

这个函数里面第一个参数就是个float数组，数组里面会传两个值，分别代表虚线每一个线段的长度以及虚线之间的间距。而我们要Zuo的就是将float数组中第一个值不断减小，第二个值不断变大。为此，SingleFire中再定义两个属性代表线段长以及间距长。

Zui后在drawPath中添加上PathEffect.dashPathEffect的处理，烟花消失的部分也Zuo好了kan下效果，是不是有点那味儿了？

Zui后我们还需要处理整体的淡出效果。实现淡化就是不断降低透明度的过程，所以需要一个循环体，每一次降低的透明度用fadeSpeed来表示。

我们需要给Fire再添加个属性alpha表示透明值，用来降低每个生成后的红点的透明值，来达到淡化的效果。上游用来改变每个Fire的属性，下游用来将改变后的数组赋值给groups来触发重组，淡化的效果就出来了。

给endPoints赋值的地方就在LaunchedEffect里面在改变透明值的同时也增加radius的大小。Zui后在drawScope中，使用drawPath将需要的贝塞尔曲线绘制出来。

好了就这么多了下面来一个个去实现它。kan下Zui终效果，是不是还挺像那么回事的？

烟花放完了又要开始重新搬砖当牛马了。生活虽然不易，但代码带来的快乐是真实的。希望这篇关于烟花动效的文章，Neng给各位kan官带来一点点灵感。祝大家在新的一年里代码无Bug，产品不改需求，天天发大财！