一款Loading动画的实现思路（三）：利用经验分解动画

感谢大家对前两篇的支持，在第一篇的评论中，简友YouXianMing提出了更好的实现思路，同样在评论中，原动效设计者 moonjoin亲自现身捧场，非常感谢！这也说明以分享来抛砖引玉是有效果的。

惯例，为了让第一次来的同学对本系列有所了解，我先贴一下完整的效果图，有兴趣的同学，请移步本系列第一篇，可以的话请多提提建议，非常感谢，以下是效果图：
 

不多说了，我们开始第三篇。

前两篇聊到了一些技术，而这一篇我们则侧重于思路，一起来聊一下阶段3和阶段4。

那么，我们先看一下阶段3的效果图，惯例，前几个阶段的动画我们用灰色正常速度表示，当前阶段则使用彩色慢速，如图
 

阶段3

有的同学要说了，这个太简单了，就是一平移嘛。

没错，就是平移。可能和我一样，很多同学最早接触的动画就是平移、旋转和缩放，可以算基本功了。

所以阶段3，我们就不多聊了，方案有很多种，比如修改layer的position.y、transform.translation.y都可以,甚至可以用本系列第二篇提到的stroke方案。

阶段3不是没有价值，因为从阶段3中我们可以得到一个重要结论，那就是：我们可以利用经验来解决问题。

这句看上去像是废话，不要急，我们接下来要看看，把分解问题和这个结论结合起来，会是什么效果。

下面是阶段4的效果图，大家请看
 

阶段4

是不是感觉比前3个阶段复杂，为什么会有这种感觉呢？

一个重要的原因是，我们觉察到阶段4是多个动画组合而成的，不像前3个阶段那样是单个动画。

像我一样单核的同学估计要疯了，恩，这儿在变，恩？那儿怎么也在变？

所以我们最好还是把这组动画分解一下，一个一个来处理。

但是怎么分解呢，一时可能没思路，那我们不如来描述一下这个动画吧。

比如这样：“一个圆被头顶上的线砸扁了，线砸进圆里，线变粗了。”

但仔细看看，砸进去的过程中，线在圆外的部分是细的，在圆内的部分是粗的，有点复杂，不如就以圆为界，分成一细一粗两条线吧。

我们再描述一次：“一个圆被头顶上的细线砸扁了，细线慢慢消失了，圆里面慢慢出现了一条粗线。”

这个描述里都有什么？

圆渐渐扁了，圆外的细线渐渐消失了，圆内的粗线渐渐出现了。

渐渐，就是动画的意思。

这样我们就分解出了3个简单的动画，

为了更直观，我们给圆、细线、粗线分别染上不同的颜色，请看下图：
 

阶段4 多彩版

思路是不是已经出来了，圆变扁，大家应该想到了基本功里的缩放（transform.scale.y），线消失与线出现，有的同学可能想到了本系列第二篇提到的stroke方案（CAShapeLayer的strokeStart和strokeEnd）。

至此，我们已经通过描述问题，把动画分解了，并且发现可以利用经验实现分解后的动画。

接下来就是找重要节点的值了。
 

图中红点就是圆的顶点，由可知，动画开始时，顶点y坐标就是center.y - r，结束时就是在这个基础加上缩放的部分2r * (1 - scale)，即center + 2r * (1 - scale)处。

再看细线，细线的长度可以从阶段3中拿到，动画开始时有长度（下图中灰色线），动画结束时，SS、SE重合，线就消失了（下图中蓝色圆的顶点），如图
 

细线

再看粗线，我们假设结束时，粗线的底部位于圆未变形时的圆心处，动画开始时SS、SE重合，线看不到（下图中灰色圆的顶点），动画结束时，SS、SE分别到了不同位置，线就出现了（下图中蓝色线），如图
 

粗线

还不是很清楚的同学，可以在纸上画一画，画着画着就明白了。

至此，关键节点的值都找到了。

下面我们来看一个问题。

有的同学注意到了，这个圆的缩放和我们常用的不一样，手机号码购买平台常用的是圆心不变，圆顶点和底点分别向圆心靠拢，形成椭圆的效果。而这个动画中，是圆底点不动，顶点和圆心都向底点靠拢。

有经验的同学可能要提到一个词了，anchor point ，这个我先截一张官方文档Core Animation Programming Guide中的示意图，图中用旋转transform示意了anchor point和position。

我们发现，3者的交界是圆的顶点，看来这是一个重要的节点。

在本示例中，我们假设动画结束时，圆的缩放系数scale为0.8，请看下图

不严谨的说，transform时，anchor point就是不动的那个点，其它点基于anchor point进行计算（具体大家还是要看一下Core Animation Programming Guide文档，或它的翻译版）。

具体到本例中，anchor point应该在圆的底点，这样缩放时，就是底点不动，其他点基于底点计算了。

理解了anchor point，有的同学写出了这一句。
 

1. self.arcToCircleLayer.anchorPoint = CGPointMake(0.5, 1);

复制代码

这一句逻辑是对的，x等于0.5即anchor point在x轴上位于圆的中心，y等于1即anchor point在y轴上位于圆的底点，和我们前文中的说到的要求一致。

但执行时，却会惊喜的发现，圆的位置发生了一次突变，如下图
 

这是怎么了，想一想，圆的大小与位置可以认为是frame的体现，查看一下CALayer的文档，在frame的Discussion中，有这么一句
 

the frame rectangle is a computed property that is derived from the values in the bounds, anchorPoint and position properties.

也就是说frame是根据bounds、anchorPoint和position这3个属性算出来的，我们没有改变bounds和position，而单单改变了anchorPoint，frame自然也跟着变了。

怎么解决呢，答案依然在frame的Discussion中，如下
 

When you assign a new value to this property, the layer changes its position and bounds properties to match the rectangle you specified.

文中的this property就是frame，这段文字说明，我们给frame指定新值，layer会自动调整position和bounds。

那就简单了，我们设置anchor point后，再将圆的frame设置回之前的值，如下
 

1. CGRect frame = self.arcToCircleLayer.frame;
2. self.arcToCircleLayer.anchorPoint = CGPointMake(0.5, 1);
3. self.arcToCircleLayer.frame = frame;

复制代码

篇幅关系，我就不贴大段代码了，完整代码大家可以查看GitHub上OneLoadingAnimation工程的OneLoadingAnimationStep4目录。

为方便大家查看，我贴了一点代码，说明一下代码的结构，如下
 

1. // 第4阶段
2. - (void)doStep4 {
3.     [self doStep4a];
4.     [self doStep4b];
5.     [self doStep4c];
6. }
7. // 4阶段a：小圆变形
8. - (void)doStep4a {}
10. // 4阶段b：逐渐消失的竖线
11. - (void)doStep4b {}
13. // 4阶段c：逐渐出现的竖线
14. - (void)doStep4c {}

复制代码

用1、2、3来表示某阶段，用a、b、c来表示阶段内某个动画，这显然不是良好的命名，但在这个示例中，这样也许更清晰。

篇幅所限，我们在下一篇中再聊后续的阶段，大家有兴趣的话，可以分解一下后面的动画，找一找感觉。

本文中提到解决问题的思路，相当一部分得益于V.Anton Spraul的《像程序员一样思考》，ISBN号9787115383396，有兴趣的同学可以看一下，写的很好。

第三篇到这就告一段落了，非常感谢大家的观看，我们下一篇再会。

阶段4中我简化的部分

大家仔细查看原动效的话，会发现圆的变化是不规则的。

原设计更符合直觉，比如大家把球放到地上，拿一个手指去按它，手指按的部分和球与地面接触的部分，变形度肯定是不一样的。

为了实现简单，我将圆的变化处理成了规则的变化，即从圆渐渐变成了椭圆。

后续我会单独开一篇和大家聊一下圆不规则变化的实现，敬请期待。