最近这气候就跟产品的需求相同改动无常，经常早上进地铁站之前就下一场大雨，然后等出了地铁站今后，雨就停了，乃至有时分会直接出太阳，不愧是魔都的气候，有个性，有主意，那么这次我就打算用Compose Desktop来完成一个这样的雨后初霁的进程

下大雨

下雨的进程其实便是若干条直线从窗口的顶部掉落至底部的进程，再细分一下便是制作一根直线，然后不停改动它y坐标的值，那么咱们就先从画一根直线开端

raining函数就代表着一个下雨的场景，在里边调用了函数drawLine在窗口中心位置画了一根竖线，这个竖线就作为雨滴的模型，现在这个雨滴还不会动的，假如要让它动起来有必要改动start与end的y坐标，那么就要运用循环动画来改动这个y坐标的值

由于雨滴掉落的进程是个加速度运动，所以这儿运用了FastOutLinearInEasing曲线改动，然后在方才的直线的start与end的y坐标上加上dropY1的值，就完成了这个雨滴掉落的进程，现在一个雨滴的掉落完成了，那么多个雨滴的掉落怎样完成呢，咱们先要把宽度分红若干份，每一份便是一个雨滴掉落的轨迹

这个xList里边就维护着所有轨迹的x坐标，然后咱们直接遍历这个list，把刚刚雨滴的代码放在里边，多个雨滴的掉落就出来了

看着怪怪的是不，这雨滴有点太规整了，现实中的雨滴是参差散布的，并且笔直方向上的雨滴数量也不可能是一个，那么要完成笔直方向上多个雨滴的话，咱们必定要在一个轨迹上多画几个雨滴，并且再创立几个与dropY1相同的变量，可是动画时刻不同，每一个雨滴用一种动画变量，经过这种掉落速度不同的方式来到达笔直方向上显现多个雨滴的视觉作用

dropY1~dropY6都是动画时刻不同的循环动画，咱们在方才的list遍历中针对每一个循环动画来画一个雨滴，别的为了到达有点参差感的作用，在偶数轨迹上运用dropY1,dropY3,dropY5,在奇数轨迹上用别的三个，咱们看下代码与实际作用

有没有一点像下雨的姿态了呢？咱们接着给天上画点乌云

乌云

乌云这种不规则的图形怎样画呢？其实也简单，能够把乌云看成是一个个椭圆连在一起，相连部分堆叠起来就好了，首要咱们先创立制作椭圆需求用的Path

这个cloudPaths里边就维护着制作椭圆需求用到的Path,这儿首要把宽度分红十份，每一份就作为椭圆的中心点的x坐标，y坐标就固定为一个值,然后就能够遍历这个数组来制作这些椭圆

下雨的部分咱们完成了，接下去便是晴天的制作

蓝天绿洲

晴天的制作咱们放在另一个Composable函数里边，命名为sunny

其中制作蓝天绿洲其实便是画两条宽度占满窗口的直线，两者的高度份额为三比一

这边咱们给两条直线呈现的时分加上一点通明突变的动画，所以需求用到animateFloatAsState函数

这儿新增grassState与skyState两个变量，作为动画切换的开关，然后咱们把grassAlpha与skyAlpha两个变量赋值给drawLine函数的alpha属性

两个开关敞开的时机，咱们就设定成页面出来时分的200毫秒今后，这儿运用Flow来设置这个延时的时刻

来看下实际作用

太阳

大晴天必定得要有太阳，太阳其实便是一个圆，咱们用drawCircle函数就能够完成，那么画圆的话首要就要确定好圆的中心点坐标以及半径

有了这三个，咱们就能够把太阳的这个圆画出来了，可是这儿也想让太阳出来的时分跟蓝天绿洲相同有一个通明突变的进程，在蓝天绿洲的动画完毕后，开端太阳的动画，所以太阳也需求一个开关以及一个由开关操控的动画

然后就能够把sunAlpha这个变量跟咱们上面创立的圆心坐标与半径的别的三个变量都代入到drawCircle函数里边

咱们再把敞开sunState的时机放在绿洲动画完毕今后的回调函数里边，这样就把太阳跟蓝天绿洲的动画连起来了

咱们再给太阳加点作用，让它周围有一闪一闪的阳光，所谓阳光其实便是均匀散布在太阳周围并指向太阳圆心的直线，那么先创立一个list来放制作直线的视点

这个视点用来干什么用的呢？便是用来核算制作直线时分start与end的xy坐标，核算坐标的函数如下

pointX与pointY分别是核算x坐标与y坐标的函数，第一个参数是点与圆心的距离，第二个参数分别是圆心中心点的x坐标与y坐标，第三个参数便是视点，那么现在就能够写制作阳光的代码了

阳光出来了，还差一闪一闪的作用，这个作用其实便是阳光的直线变长变短的循环动画，循环的目标便是直线最长与最短的长度差，有了刚刚下雨的衬托，咱们这个循环动画立刻就出来了

lightDis便是阳光长度的差，咱们在刚刚制作直线的代码中运用这个变量

阳光的代码就全都完毕了，现在咱们就让阳光闪烁起来

白云

刚刚咱们制作过乌云，几个椭圆拼起来就到达乌云的作用了，可是白云不能用同样的方法，究竟大晴天天上也密密麻麻那么多白云的话，那瞅着又要下雨了，那怎样画呢？咱们依然仍是先画一个椭圆

然后在椭圆上再连着画三个相连的圆，意图便是让四周都有个圆弧，到达看起来像个云朵相同作用

一个云朵就画出来了，不难吧？咱们给这朵云来点作用，让它能够飘动起来，怎样飘动呢？由于制作云朵的时分，无论是椭圆仍是三个圆，所在位置的x坐标都是width.value * 2 / 3，那么咱们只需求改动这个值，就能够起到让云动起来的作用了，这儿咱们又一次运用到了循环动画，循环改动x的值

cloudCenter便是循环改动的x值，现在就将这个值代入到制作云朵的代码中，让它替代原来的width.value * 2 / 3

咱们的白云也动起来了，作用如下

彩虹

下完雨的气候，应该大概率会呈现个彩虹，那么咱们这儿也整个彩虹出来，彩虹咱们能够把它看成是七个不同色彩的扇形组合在一起，扇形的巨细以及左上角的坐标由外到内是根据单个扇形的粗细来递减的，所以咱们需求如下几个变量来制作扇形

• singleWidth：单个扇形的粗细
• circleRdius：扇形的半径
• colorList：所有扇形的色彩

制作扇形需求用到drawArc函数，制作七个扇形的代码如下所示

彩虹的姿态就已经画出来了，但现在的彩虹还只是停止的，咱们希望让彩虹也能够动起来，并且是在太阳出来今后开端动，比如从右边开端慢慢的打开，那么关于这个扇形来说便是sweepAngle从0到-180度的进程，所以咱们给这个进程设置个开关以及视点改动的动画

rainbowState便是彩虹动画的开关，并且在太阳动画完毕今后敞开，敞开今后彩虹sweepAngle的视点就从0打开至-180度，现在咱们把sweepAngle代入到制作彩虹的drawArc函数里边

现在再运行一遍代码，整个晴天的动画进程就出来了

雨后初霁

现在便是最后一步，需求将咱们之前做的下雨天跟晴天连在一起，由于这两个进程咱们都做在独自的Composable函数里边，所以这儿能够运用AnimatedVisibility来做转场的切换，咱们知道AnimatedVisibility只有当第一个参数visible为true的时分，才会展示content,所以这儿展示下雨天和晴天也是需求一个开关来操控

sunnyState便是一个操控下雨天与晴天的开关，这儿还设置了一个定时器，三秒今后触发转场，隐藏下雨天，显现晴天，转场代码如下

现在咱们整个雨后初霁的进程就完成了，最后看下作用

总结

这篇文章没有什么难点，都是些基本的Canvas绘图技巧和动画常识，主要是最近真实被这气候给整抑郁了，所以才做了这么一个小demo，算是文娱一下，希望这气候赶忙完毕吧。