前几天，朋友推荐了一款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逆时针的弧，我们动画就实现了。
到了这一步，我们的动画思路已经有了，重要节点的值也知道了，剩下的就是写代码了。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery