最近一直在用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去实现一下。