iOS CALayer组合动画实现loadingView

前言

hihi，勇敢的小伙伴儿们，大家好，loadingView在生活中已经是很常见了，各大平台都有不同的loadingView，最常见的浏览器就能看到的如下图这种Google Chrome的等待动画，

还有很多种其他的loading动画需要我们学习，

有时候我们使用做好的gif就可以实现，那么我们为什么要学习动画的绘制呢？

因为CALayer动画可以实现比UIView动画更丰富、更底层、效率更高的动画。能用代码实现的尽量不用资源文件，实际上也是对我们应用的一种瘦身。

话不多说，送上我的Demo地址：CALayerDemo1 (名字起得很随意hhhh)，然后开始我们今天的学习吧~

正文

这篇文章通过两个加载动画向大家介绍CALayer的动画。按照面向对象的思想说，Layer其实就是一个模型类，它包含若干属性，并没有任何处理逻辑的方法，这些属性影响着显示在Layer中的内容。我们先来看看UIView和CALayer之间有什么区别和联系。

• 联系：Layer是View背后的那个女人。每一个UIView后面都有对应的CALayer，大家看到的在UIView中显示的内容其实是在CALayer中。
• 区别：
  • View有复杂的、各种组合的布局机制。Layer只有极简单的布局。
  • View可以响应用户交互。Layer不能响应用户交互。
  • View中的绘画逻辑有CPU执行。Layer中的绘画直接有GPU执行。
  • View有丰富的、功能强大的子类。Layer只有很少的几个子类。
  • View动画属性较少，局限性较大。Layer由于更底层、动画属性更多，所以可以实现出更灵活、更丰富的动画。

第一个CALayer动画

Layer动画系列的文章，我不准备系统的从简单到复杂的知识进行讲解，我会通过各种实战示例，示例中用到什么知识点就讲什么知识点。

第一个动画让我们来实现Google Chrome浏览器加载时页签上的等待动画~

新建项目CALayerDemo1，打开Main.storyboard，拖拽一个UIView到ViewController中，添加好约束，自行设置ViewController和UIView的背景色，这里UIView的背景色我设置为无色：

然后添加该View的Outlet到ViewController中，这个UIView就是要展示加载动画的View：

@property (weak, nonatomic) IBOutlet UIView *loadingView;

打开ViewController.m，申明一个常量属性ovalShapleLayer：

CAShapeLayer *ovalShapeLayer = [CAShapeLayer layer];

ovalShapleLayer的类型是CAShapleLayer，它是CALayer的为数不多的子类之一。它的作用是在屏幕上画出各种形状，不论是简单的圆形、方形还是复杂的五角星或不规则图形都难不住它。CAShapeLayer有如下一些主要属性：

• strokeColor：笔画颜色。
• strokeStart：笔画开始位置。
• strokeEnd：笔画结束位置。
• fillColor：图形填充颜色。
• lineWidth：笔画