一直以来我做动画基本出于两种目的，一种是事先知道自己想要做什么，然后逐步去实现它，比如我的那些loading，进度条，蜂窝墙之类的，另一种是想尝试一些没试过的方式，能做出来啥样子自己也不知道，比如那个180根贝塞尔曲线，今天要做的动画则是出于后一种目的，迄今为止做的动画用到的Math函数很少，常用的比如像toRadians角度转弧度的，abs取绝对值，random取随机数，但自从在吹泡泡那篇文章里用了一次对数函数ln之后，忽然就有个念头，如果在平时一些寻常的动画中加入一些Math函数后，会得到怎样的效果呢

先做个简单的

先从一个简单的动画开始，实现一个圆周运动的动画，老规矩先把一些必要的变量定义好

界面的宽高width,height,中心点坐标centerX,centerY,以及圆周运动的半径radius,然后在圆周上随意画几个点，点的坐标如下

count表示绘制的点的数量，pointX跟pointY是两个分别计算圆周上某一个点的xy坐标的函数，第一个参数是圆周半径大小，第二个参数是中心点xy坐标，第三个参数是角度，两个函数的代码如下

绘制点的api这次选择使用drawPoints函数，这个函数需要接受的第一个参数就是点的所有位置，也就是一个Offset数组，我们把这个数组创建出来

靠着上述这些代码，就可以在Canvas中调用drawPoints函数进行点的绘制

然后界面上就能看到这么几个点

点已经绘制出来了，那么下一步就是要让这些点绕着圆周动起来，这里就要使用rememberInfiniteTransition()创建一个0f到360f无限循环变化的动画，代码如下

动画规格使用keyframes的原因就是保证让动画可以在规定时间内跑完一个圆周，不然动画就会显的不是很连贯，现在将动画angle加到计算圆周坐标的函数里面去，代码如下

这样我们就初步完成了一个若干个点做圆周运动的动画

修改动画

上面我们已经实现了一个圆周运动的动画，也是一个很普及的动画，基本在做类似loading效果的时候，都会用到上面类似的代码，那么现在如果想要改一下这个动画，可以从哪些角度入手呢？半径？中心点位置？圆周运动的速率？这些都可以，我们这里先改变一下半径试试，可以让半径在动画的过程中加上一些值，这个值就用正弦余弦函数计算出来，函数的入参就是当前点的角度，也就是it+angle,代码如下

这样做会有怎样的效果呢？来看看

乍看一下没啥区别，但是我们仔细看看会发现界面上的小白点在做圆周运动的时候已经有些轻微的抖动了，主要是因为无论是正弦还是余弦，计算出的值的范围永远是在-1到1之间，所以效果不是很明显，如果想要看出点明显的变化，就需要让正余弦计算出的值再放大几倍，比如给它放大个180倍

现在的效果就变的很明显了

我们知道正弦余弦都是周期函数，形成的图像刚好是一个波浪线，而这里将波浪线与圆周运动结合在了一起，达到的效果就是效果图那样有点立体滚动的感觉，不过这里动画显的有点快，可以让它稍微慢一些，方式就是减小正弦余弦入参值

将正弦余弦函数内的angle缩小50倍后，动画就变慢了，效果也更清晰了一些，我们看到现在动画的范围只是在圆周上的一段弧度内，如果要让动画在整个圆周上进行，只需要将白点的个数增加到大于360就好了，比如这里将count值变为3600,那么效果就变成了下面这样

忽然眼前一花是不是，不过现在有点看不清内部白点的运动轨迹，一部分跟这边gif失帧有关，另一个就是圆周运动上angle变化的速率太快了，我们将这个速率变慢点试试

将动画时长延长到了20秒，现在再看下效果

现在整体效果就变的清晰很多了，这里再做点优化，目前整体效果的形状比较固定，单一，我们想让形状也可以发生改变，那么怎么做呢？也很简单，让xy坐标里面的正弦余弦函数的入参，变化速率不一样就可以了

这里只是将y坐标的正弦函数内的参数变化速率加快了一些，我们的形状也可以发生改变了，效果是不是看起来有那么点小解压

上色

整体效果差不多就完成了，现在给这个动画加点颜色，毕竟全都是白色略显单调了一点，先准备个数组，里面放若干个色值

接着给这个数组的下标创建一个循环变化的动画值

这样当colorList[index]每次下标值都不同的时候，取到的值也都不一样，我们将这个色值切换的过程用animateColorAsState来实现，这样颜色与颜色的切换就有了一个过渡过程

最后在Canvas中，染色部分使用brush代替color，这样整体的色值看起来就会有点渐变效果

这样就完成了，贴上最后效果图

总结

整个动效开发过程虽说显的没有什么目的性，等于是想到什么就做什么，但是也证明了一点，那就是一些Math函数的确对做出好看的，不一样的动效有一些帮助，大家有兴趣的不妨可以自己去尝试一下，我们下次见～拜拜～