之前在一篇文章里边运用过多根贝塞尔曲线做了一个比较酷炫的动效，那会就觉得那种思路挺风趣的，感觉能够顺着这种思路完成一个愈加有意思的动效，比方屏保，今日咱们就来一步步运用贝塞尔曲线做一个屏保动效

源码地址

预备工作

不论做哪种动效，一些变量比方窗口宽高，中心点坐标都是需求的，所以先把这些变量创立出来

在Canvas里边获得了画布的宽高width和height,并且核算出了中心点的x坐标与y坐标centerX与centerY,接下去就要开始制作贝塞尔曲线了

制作曲线

咱们都知道制作贝塞尔曲线其实最关键的部分便是确定那几个操控点，而三阶曲线一共需求四个点，第一个点毫无疑问就确定为画布中心点了，其余三个点咱们就把他们放置在一个椭圆上，为什么不是在一个圆周上而是椭圆呢，因为假如将三个点放在一个圆周上的话，咱们只能改动圆周的半径，达到的作用也仅仅动效的规模变大变小，但是椭圆就不相同了，椭圆里边有长轴和短轴，能够经过不断改动长短轴的长度来改动椭圆的形状，然后最终出现的作用也是不相同的，好了，首先得知道怎样核算椭圆上每一个点的坐标

上面便是核算椭圆上某一个点的xy坐标，其中xRadius表明x轴上轴长，yRadius表明y轴上的轴长，将上面这俩公式转换成代码便是下面这样

从这两个函数里边知道假如想要在椭圆上获得某个点的坐标，需求知道长短轴巨细，中心点坐标以及当时点所对应的视点，咱们除了中心点坐标是已知的，其他两个现在还都不知道，那么先界说两个变量作为长短轴巨细

maxLength便是长轴巨细，minLength便是短轴巨细，而视点的话，因为咱们这儿是要画180根曲线，所以咱们能够把椭圆分成180份，每两度一个点

这样就能先把第一组操控点的坐标创立出来

第二组第三组操控点坐标在第一组的基础上做点改动，第二组的视点都增加30度，第三组的视点都增加60度，代码如下

现在制作贝塞尔曲线所需求的操控点都有了，接下来便是把每条曲线对应的Path做出来

接下来的事情就很简单了，在Canvas里边把这180根贝塞尔曲线制作出来，看代码

这儿还给曲线增加了点pathEffect，算是点缀，可加可不加，运行一遍代码后就得到下面这样的图画

好家伙整了个轮回眼出来了，当然咱今日不是来画轮回眼的，持续来做咱们的动效，开头说了咱用椭圆主要是因为椭圆的长短轴能够来回改动，然后构成的样子也不相同，那么这儿也给长短轴增加点改动

这儿先做了两个循环改动的动画变量，baseX表明x轴上的轴长改动，初始是从长轴改动到短轴，而baseY则反过来，它代表Y轴上的轴长改动，初始是从短轴改动到长轴，将这两个动画变量代替原先三组操控点里边的轴长

现在得到的作用便是下面这样的

除了轴长，咱们给视点也加上一个动画变量，动画变量代码如下

三组操控点的代码更改为

能够看到在不同的坐标里边，视点angleDiff都会乘上或除上一个数字，数字具体是啥没有具体要求，主打一个随机，目的便是让不同的坐标视点改动速率不相同，现在咱们的动效就变成下面这样的了

那既然视点后面的数据是随机的，那么换一组数字是不是能够得到其他作用呢，咱们来试一下

这儿又做了三组操控点，在视点改动上跟上面的做了区别，然后咱们运用这三组新的操控点来看看能够做出怎样的作用出来

作用就变成别的一种款式了，刚才咱们依靠着改动视点的改动速率完成了两种不同的动效，现在将这两种动效合并，怎样合并呢？在pathList里边依据下标判别，假如是偶数就用第一种，假如是奇数就用第二种，代码如下

这样子做就能把两种作用合并在一起了，得到的作用便是下面这样

大致的一个样子就画好了，现在来优化一下整个视觉体会

增加色彩切换

现在咱们的作用还仅仅纯白色，太单调了，预备给它多加点色彩上的改动才会好看些，这样的话咱们先创立个色彩数组，里边放上需求显现的色彩色值

总共有这么几个色彩，然后经过访问colorList的下标值来给动效加色彩，而这个下标值就用循环动画来创立，这样动效显现的色彩就能够循环从colorList中获取，完成的代码如下

这儿在获取到下标值的时分，还运用了animateColorAsState函数让色彩之间的切换有个动画过渡的进程，而给动效染色就运用lineColor变量

还增加了点色彩上的渐变，让作用愈加立体些

改动轴长

发现全体作用上在某些时分周围留白的空间比较大，形成这种现象的原因是因为短轴与长轴相差过大，所以咱们将短轴与长轴的值稍微调整一下，让它们之间的差值不要过大

改完轴长后的作用如下

改动dash间隔

现在dash的间隔还仅仅个写死的值，这边希望让这个值也有个区间的改动，所以咱们也创立个dash的循环改动的变量,并且把这个变量代入到制作曲线的代码中

得到的作用如下

画布旋转，增加含糊作用

最终一步咱们让画布旋转起来，并增加含糊作用，用到的操作符分别是rotate和blur,rotate传入的值能够用咱们前面现已创立的angleDiff，也能够在新建一个视点改动的动画变量，这儿就新建一个，blur就传入5.dp,带点小含糊，代码如下

作用就变成下面这样

最终假如想要弄成屏保的话，只需求将窗口改成全屏，宽高设置为屏幕宽高即可，代码如下

这儿就不放作用图了，主要是太大了。

总结

这个动效其实能够做成许多种样子，代码中许多当地改一些参数，款式形状都变了，有兴趣的能够自己去着手尝试下。