前几天，朋友推荐了一款Loading动画，感觉挺有意思，动画是这样的

 

　　正好这段时间在学习动画，就试着实现了一版，

 

　　为了降低难度，我对动画做了一些简化，做完后是这样的

 

　　考虑到抛砖引玉是最好的学习方式之一，我就分几篇把自己的实现思路写出来，请大家把更好的想法砸过来吧！

 

　　这个动画乍一看很复杂，但我们相信一点：

 

　　一个复杂任务可以拆分成一组简单任务。

 

　　因此，我把这段复杂动画按时间拆分成了几个阶段，又把每个阶段拆分成了几个并行的简单动画。

 

　　怎么拆分呢，如果我们有动画的gif，我们可以用系统自带的Preview看一下，像这样

 

　　在gif中一帧一帧的看一下，心里大约就有拆分的思路了。

 

　　每个人拆分的可能都不一样，答案本来就不只一种，每个阶段我会写一篇文字?，这一篇我们一起看看第一阶段。

 

　　?第一阶段是这样的，为了方便大家观看，我放慢了动画速度

 

　　?看上去，它就是一段起点和终点不停变化的弧，于是我决定用重绘弧的方式实现。

 

　　关于绘制，我决定使用UIBezierPath，初次实现，我总是选择自己熟悉的方式。

 

　　要画弧，我们用到UIBezierPath的这个方法

 

　　+ (instancetype)bezierPathWithArcCenter:(CGPoint)center

 

　　radius:(CGFloat)radius

 

　　startAngle:(CGFloat)startAngle

 

　　endAngle:(CGFloat)endAngle

 

　　clockwise:(BOOL)clockwise

 

　　为了后文的叙述方便，我要祭出UIBezierPath的官方文档中的这张图了，大家在后文看我手绘的丑图时，可能需要参考此图

 

　　开始了，

 

　　假设弧的起点为O(origin)，终点为D(dest)，动画中弧是逆时针转动的，那我们画弧时也采用逆时针，也就是说，我们的弧是从O点逆时针画到D点。

 

　　先看下这张图，动画开始和结束时的弧的样子(注意：结束时的弧其实是个圆，为了方便说明，我故意留了个缺口)

 

　　再回头观察动画可知，结束时，O点和D点在0(或2π)处重合，

 

　　因此，结束时可以认为弧是从2π逆时针画到0(虽然0和2π在一个点，但从0到0、从0到2π、从2π到0画弧是不一样的，推荐大家大家动手画一下)

 

　　结束时O、D我们确定了，那么开始的时候呢，我们要看下动画中O、D的运行轨迹了。

 

　　观察动画，我们可以得出O、D的运行轨迹是这样的

 

　　可以看出，O点逆时针(逆时针可以认为角度在减小，可以再参考上文中UIBezierPath的官方文档中的那张图)绕了3/4圈到2π，D点逆时针绕了1.5圈到0；

 

　　因此我们可以得出O、D的角度变化，是这样的

 

　　即O点从7/2的π减小到2π，D点从3π减小到0。

 

　　现在我们知道了O、D的起点，可以将前面图上的文字补全了

 

　　由此我们可以得出，O、D在动画阶段中的角度(图中的progress取值范围0——1)

 

　　只要我们的progress从0逐渐变到1，我们O、D就逐渐从起点运动到终点了，每次变化的时候绘制从O到D逆时针的弧，我们动画就实现了。

 

　　到了这一步，我们的动画思路已经有了，重要节点的值也知道了，剩下的就是写代码了。