总结：一款Loading动画的实现思路

感谢大家对前几篇的支持，这一篇，我们一鼓作气，把整个动画完成。

惯例，为了方便第一次来的同学，我先贴一下动画完成的效果图：

实现阶段4时，我们用了一种处理问题的方式，大约是这样的：

描述问题，直到足够清晰，

把问题分解成一组小问题，

利用经验处理可以解决的问题，

经验无法解决的问题，我们去调研，调研结果会成为我们下次的经验。

阶段5中，我们再应用一下这个方式。

先来看一下阶段5的效果图，

惯例，前几个阶段的动画我们用灰色快速表示，当前阶段使用彩色慢速表示，如图：

阶段5

看上去比阶段4还要复杂，别急，我们来描述一下：

一开始圆是扁的，圆里面有一条粗线，粗线的顶部和圆的顶部连在一起，

圆渐渐恢复原状，同时粗线渐渐变长，连到了圆的底部，与此同时，粗线的某处出现了两条线，分别向左下、右下延伸，渐渐连到了圆上。

很粗糙，但基本上描述出了这个阶段。

上文中我加黑了部分文字，这些文字很有标志性

“一开始”，指示出了本阶段动画的初始阶段

“渐渐”，指示出了动画

“同时”、“分别”，指示出了本阶段中可以拆分出的子动画

由此我们可以得到下面的描述：

初始：
圆：扁的
粗线：顶部和圆顶部连着，底部不连着
左下线：看不到
右下线：看不到

动画：
圆：恢复到正常的形状
粗线：变长
左下线：出现并变长
右下线：出现并变长

结束：
圆：正常的形状
粗线：顶点、底点分别与圆的顶点、底点连着
左下线：起点在粗线上，终点在圆上
右下线：起点在粗线上，终点在圆上

和前面的描述相比，这个描述形式化了，虽然还比较粗略，但已经清晰的标明动画被拆分成了4部分，各部分的初始及结束状态也有了。

我们给4部分染上不同的颜色看一下：

阶段5多彩版

是不是比之前的清晰多了，

描述问题和分解问题，到这里我们就完成了。

接下来就是思考动画的方案了：

圆：阶段4中是执行transform.scale.y动画变扁了，本阶段将transform恢复为CATransform3DIdentity就可以了；

粗线：阶段4中是从无成长到一定长度，用的stroke方案（想了解stroke方案的同学请戳第二篇），这个阶段就是继续变长，沿用stroke方案就可以了；

左下线、右下线：本质是一样，从无成长到一定长度，类比粗线可知，可以使用stroke方案；

这些方案都是以前的经验，阶段5可以不用调研了。

接下来就是找关键的节点值了：

对于一个动画来讲，关键的节点就是初始状态和结束状态，前几篇中我们一起找过了关键的节点值，相信大家已经有感觉了，本文我们就不再找了。

我们一起来看一下阶段5中特殊的地方：

前文中说到粗线时，我说的是继续变长

继续听上去就有延续的意思，看上去，手机靓号卖号粗线两个阶段的动画可以合并成一个。

回忆一下，阶段4中粗线的path起点是圆未变形时的顶点，终点是圆未变形时的圆心，动画是从path起点逐渐stroke到path的终点，

结合阶段5，我们可以将path的终点修改为圆的底点，将阶段4的动画修改为从path的起点stroke到path的1/2处，阶段5的动画是在阶段4的基础上继续stroke到path的终点，这样，两个阶段的动画就合起来了。

有的同学可能会说，早知道是这样，一开始就这样写就可以了。

这么说的是有道理的，有的人习惯这样，先分阶段考虑，再整体看一下各阶段，该合并的合并，该修改的修改，方案成形，最后写代码，这是个很好的方式。

然而对我来说，阶段性的成就感很重要，每当我看到一个阶段的动画在我眼前动起来，感觉都很爽，所以我还是习惯于逐个阶段的实现，有需要时重构前面的阶段，只要逻辑清晰，重构起来问题不大。

每个人都能找到最适合自己的方式，这本身就是一种乐趣。

好了，阶段5我们聊了很多，后面的阶段我们就简要的说一下了。

从完整的效果图可知，这个动画是有成功和失败两个状态的，因此我们分开来看。

成功状态，从阶段5到阶段6_success：

阶段6_success

描述一下：

圆变色

对号渐渐出现（stroke）

失败状态，先是从阶段3直接到阶段6_fail：

阶段6_fail

描述一下：

圆变色

叹号的上半部分渐渐出现（stroke）

叹号的下半部分渐渐出现（stroke）

然后从阶段6_fail到阶段7_fail：

阶段7_fail

描述一下：

叹号绕圆心左右晃几下（rotate）

阶段7_fail要简单的说一下：

在阶段6_fail中，叹号被拆分成了上下两个layer，而在阶段7_fail中两者又是作为一个整体动的，我们要让它们分别执行动画么？

不是的，一个独立的动画应该只涉及一个对象，两个layer有共同的superLayer，让superLayer执行动画就可以了，假如superLayer还有其他subLayer，不方便执行动画，我们在两个layer和superLayer中间插入一层专门执行动画的layer就可以了。

到这里，我们的动画就完成了，完整代码请移步GitHub上的OneLoadingAnimation工程。

在结束之前，我们简单说一下阶段1另一种思路（想看看阶段1的同学请戳第一篇），这个思路更符合直觉，这个思路是受简友YouXianMing在第一篇中的评论启发，感谢。

先回忆一下阶段1的样子：

阶段1

描述一下：

圆从不完整渐渐变到完整（stroke）

圆在渐渐旋转（rotate）

由此我们得出，一个圆同时执行stroke和rotate动画就可以了，下面是示意代码

// 不完整的示意代码
- (void)doStep1 {
// 不用自定义layer了
self.arcToCircleLayer = [CAShapeLayer layer];
// stroke动画
CABasicAnimation *ssAnima = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
CABasicAnimation *seAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
// rotate动画
CABasicAnimation *rotateAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// 同时执行
CAAnimationGroup *animation = [CAAnimationGroup animation];
animation.animations = @[ssAnima, seAnima, rotateAnima];
}

复制代码

是不是比第一篇的实现方式更清晰，

我们也可以看到，问题分解后，局部的优化也比较方便，

这部分的完整代码我放到了工程的OneLoadingAnimationStep1Another目录下。

有的同学还记得，我们这是一个简化的版本，阶段4中原动效中圆的不规则变形被我处理成了规则变形，

为了思路不被卡住，我选择了暂时简化，完成之后，我们可以再去优化。

为了弥补这个缺憾，我会开一个外篇，专门聊一下圆不规则变形的实现，欢迎大家到时来捧场；

另，有简友在简信中提到了Swift，因此我写了一个Swift版的实现，放在了工程的OneLoadingAnimationCompleteSwift目录下，由于我的Swift水平不够，代码里还有坑，仅供参考。

本系列的主线到这就完结了，非常感谢大家的捧场！

总结：一款Loading动画的实现思路相关推荐

一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
一款炫酷Loading动画--加载成功
简介昨天在简书上看到一篇文章,介绍了一个加载动画的实现过程一款Loading动画的实现思路(一) 只可惜原动画是IOS上制作的,而看了一下,作者的实现思路比较复杂,于是趁着空闲写了一个Androi ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
html 载入效果,HTML5 Loading动画特效集锦
本文作者html5tricks,转载请注明出处以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为 1.HTML5 Canvas发光 ...
一款炫酷Loading动画--加载失败
简介上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分 ...
html设置loading,几个纯CSS实现的loading动画
或者是因为网页体积较大,又或者是由于使用vue一类的前端库,浏览者在打开网页时往往会出现一段时间的白屏,通常的做法是在网页未完成首屏渲染时,向用户展示一个loading动画,页面渲染好了后再隐藏loa ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
android loading封装_我们经常用的Loading动画居然还有这种姿势
背景 Loading动画几乎每个Android App中都有. 一般在需要用户等待的场景,显示一个Loading动画可以让用户知道App正在加载数据,而不是程序卡死,从而给用户较好的使用体验. 同样的 ...

总结：一款Loading动画的实现思路

总结：一款Loading动画的实现思路相关推荐

最新文章

热门文章