最近一直在用Compose练习做动效果，但是动效做的再多，在实际做项目的时候，最常用到动效的就是一些loading框，上拉加载下拉刷新之类的场景，我们以前往往遇到这样的需求的时候，会直接问设计师要个切图，或者一个lottie的json文件，但是除了问设计师要资源，我们能不能自己来做一些动效呢，下面我们就来做几个

源码地址

转圈的点点

之前在网上看见别人用CSS写了一个效果，几个圆点绕着圆心转圈，每一个圆点依次变换着大小以及透明值，那么既然CSS可以，我们用Compose能不能做出这样的效果呢，就来试试看吧，首先既然是绕着圆心转圈的，那么就需要把圆心的坐标以及半径确定好

代码中centerX与centerY就是圆心坐标，radius就是圆的半径，mSize获取画布的大小，实时来更新圆心坐标和半径，然后还需要一组角度，这些角度就是用来绘制圆周上的小圆点的

angleList里面保存着所有圆点绘制的角度，那么有了角度我们就可以利用正玄余玄公式算出每一个圆点的中心坐标值,公式如下

pointX与pointY就是计算每一个圆点的中心坐标函数，那么我们就能利用这个函数先绘制出一圈圆点

圆点画好了，如何让它们转圈并且改变大小与透明值呢，其实这个过程我们可以看作是每一个圆点绘制的时候不断的在改变自身的半径与透明值，所以我们可以再创建两个数组，分别保存变化的半径与透明值

然后在绘制圆点的时候，我们可以通过循环动画让每一个圆点循环从radius与alphaList两个list里面取值，那么就能实现大小与透明值的变化了

还差一点，就是让每一个点变化的大小与透明值不一样，那么我们只需要增加一个逻辑，每一次获取到一个listIndex值的时候，我们就让它加一，然后当大小要超过radiusList与alphaList的临界值的时候，就让下标值变成0然后在重新计算，就能实现让每一个点的大小与透明值不同了，代码如下

这样我们这个动效就完成了，最终效果图如下所示

七彩圆环

这个动效主要用到了Modifier.graphicsLayer操作符，可以看下这个操作符里面都有哪些参数

可以看到这个函数里面提供了许多参数，基本都跟图形绘制有关系，比如大小，位移，透明，旋转等，我们这次先用到了旋转相关的三个参数rotationX,rotationY,rotationZ,比如现在有一个Ring的函数，这个函数的功能就是画一个圆环

然后我们在页面上创建三个圆环，并且分别进行x,y,z轴上的旋转，代码如下

旋转使用了角度0到360度变化的循环动画，那么得到的效果就像下面这样

会发现看起来好像只有前两个圆环动了，第三个没有动，其实第三个也在动，它是在绕着z轴转动，就像一个车轮子一样，现在我们尝试下将这三个圆环合并成一个，让一个圆环同时在x,y,z轴上旋转，会有什么效果呢

圆环的旋转马上就变得立体多了，但是只有一个圆环未免显得有点单调了，我们多弄几个圆环，而且为了让圆环旋转的时候互相之间不重叠，我们让每一个圆环旋转的角度不一样，如何做？我们现在只有一种旋转动画，可以再做两个动画，分别为60到420度的旋转和90到450度的旋转，代码如下

然后这里有三个动画，方向也有xyz三个轴，通过排列组合的思想，一共可以有六个不同方向旋转的圆环，于是我们创建六个圆环，在x,y,z轴上代入不同的旋转角度

现在我们再给圆环染个色，毕竟叫七彩圆环，怎么着也得有七种颜色，所以在Ring函数里面定义一个七种颜色的数组，然后创建个定时器，定时从颜色数组中拿出不同的色值给圆环设置上

有个index的变量默认指向数组的第一个颜色，然后每经过500毫秒切换一个色值，并且当index指向数组最后一个色值的时候，重新再设置成指向第一个，我们看下效果

我们看到圆环可以自动改变自身的颜色了，但是效果还是有些单调，我们再优化下，将每一个圆环初始的颜色设置成不同的颜色，那么就要给Ring函数多加一个初始下标的参数，就叫startIndex,然后原来创建index的初始值就从0变成startIndex,其他不变，代码如下

现在差不多每一个圆环都有自己的“想法”了，旋转角度不一样，初始颜色也不一样，最终效果图我们看下

七彩尾巴

一样都是七彩，上面做了个圆环，这里我们做个尾巴，怎么做呢？首先我们从画一个圆弧开始

圆弧就是一个不与圆心相连的扇形，所以我们用到了drawArc函数，然后参数我们随意先设置了几个，就得到了一个初始角度为0，跨度为150度的圆弧了

然后我们现在让这个圆弧转起来，通过循环改变startAngle就能达到圆弧旋转的效果，所以我们这里添加上一个循环动画

就得到这样一个旋转的圆弧了，现在部分app里面的loading动画估计就是用的这样的样式，我们现在就在这个样式的基础上，将它变成一个会变颜色的尾巴，首先如何做成一个尾巴呢，貌似没有这样的属性，所以我们只能靠自己画了，我们可以把尾巴看成是若干个圆弧叠放在一起的样子，每一个圆弧的其实角度逐渐变大，sweepAngle逐渐变小，圆弧粗细也逐渐变大，当这些圆弧都画完之后，视觉上看起来就像是一根尾巴了，所以我们需要三个数组，分别存放需要的初始角度，sweepAngle以及圆弧粗细

然后遍历strokeList,将三个数组对应下标所对应的值取出来用来绘制圆弧，绘制的代码如下

再运行一遍代码，一根会转圈的红色尾巴就出来了

接下来就是如何改变尾巴的颜色，我们可以像之前画圆环那样的方式来画尾巴，但是那样子的话尾巴切换颜色的过程就会变的很生硬，我们这里用另一个方式，就是animateColorAsState函数，同样也是有一个定时器定时获取一个色值List的颜色，然后将获取到的颜色设置到animateColorAsState的targetValue里去，最后将动画生成的State<Color>设置到圆弧的color属性里去，代码如下

最终我们就获得了一个会变颜色的尾巴

风车

风车的绘制方式有很多种，最简单两个交叉的粗线条就能变成一个风车，或者四个扇形也可以变成一个风车，这里我使用贝塞尔曲线来绘制风车,使用到的函数是quadraticBezierTo，这个一般是拿来绘制二阶曲线的，首先我们先来画第一个叶片

我们看到这里的控制点选择了画布中心，以及左上角和画布上沿的中点这三个位置，得到的这样我们就获得了风车的一个叶片了

我们再用同样的方式画出其余三个叶片，代码如下

一个风车就画出来了，是不是很快，现在就是如何让风车动起来了，这个我们可以使用之前说到的函数graphicsLayer，并且使用rotationZ来实现旋转，但是如果仅仅只是z轴上的旋转的话，还可以使用另一个函数rotate，它里面默认就是调用的graphicsLayer函数

现在可以在上层调用Windcar函数，并让它转起来

稍作优化一下，给风车加个手持棍子，这个只需要将Windcar函数与一个Spacer组件套在一个Box里面就好了

这样我们的风车也完成了，最终效果如下

总结

有没有觉得用Compose就能简简单单做出以前必须找设计师要切图或者json文件才能实现的动效呢，我们不妨也去试试看，把自己项目中那些loading动效用Compose去实现一下。