一.iOS核心动画 - 关于图层与视图

引言

Core Animation听起来会让人误以为它只是用来做动画的，但是事实上它是从Layer Kit库演变而来的，其中做动画的功能只是Core Animation特性的一小部分。

Core Animation是一个复核引起，它的作用就是尽可能快地组合屏幕上不同的显示内容，这些内容被分解成独立的图层，存在一个叫做图层树的体系当中。于是这个树形成了UIKit以及在iOS应用程序当中你所能在屏幕看见的一切的基础。

介绍

在日常开发中我们对视图的概念已经比较熟悉了。一个视图就是显示在屏幕上的一个矩形块，它可以拦截点击触摸等用户输入的事件。视图在层级关系中可以嵌套，一个视图可以管理它的所有子视图的位置。

我们创建一个非常简单例子来说明视图的层级关系，代码如下：

        let view = UIView(frame: CGRect(x: 100, y: 100, width: 150, height: 150))
        view.backgroundColor = .red
        self.view.addSubview(view)
        
        let subGreenView = UIView(frame: CGRect(x: 25, y: 10, width: 50, height: 50))
        subGreenView.backgroundColor = .green
        view.addSubview(subGreenView)
        
        let subBlueView = UIView(frame: CGRect(x: 25, y: 75, width: 50, height: 50))
        subBlueView.backgroundColor = .blue
        view.addSubview(subBlueView)

视图显示如下，两个subView嵌套在红色view当中：

在iOS当中，所有的视图都从UIView这个基类派生出来的，UIView可以处理触摸事件，可以支持基于Core Graphics绘图，可以做仿射变换，或者简单的滑动渐变的动画。

图层CALayer在概念上和UIView类似，同样也是一些被层级关系树管理的矩形块，同样也可以用于显示图片文本或者背景颜色，同样也可以管理子图层的位置。它和UIView最大的不同就是CALayer不处理用户的交互。

UIView和CALayer的层级关系

每一个UIView都有一个CALayer实例图层，视图的职责就是创建和管理这个图层，以确保当子视图在层级关系中添加或者被移除的时候，他们关联的图层也同样对应在层级关系树当中有相同的操作。

事实上这些图层CALayer才是真正用来在屏幕上显示和做动画的，UIView仅仅是对它进行了封装，并提供了可以处理用户交互的能力。

但是为什么会这样设计呢？为什么会提供两个平行的层级关系呢？

原因就在于要做职责分离，这样也可以避免许多重复代码。在iOS和Mac OS两个平台上，事件和用户交互有很多地方不同，基于多点触控的用户界面和基于鼠标键盘有着本质的区别。

绘图，布局和动画，相比之下就是类似Mac笔记本和桌面系列一样应用于iPhone和iPad触屏的概念。把这种功能的逻辑分开并应用到独立的Core Animation框架，苹果就能够在iOS和Mac OS之间共享代码，使得对苹果自己的OS开发团队和第三方开发者去开发两个平台的应用更加便捷。

图层的作用

下面我们来全面的了解一下CALayer，苹果虽然为我们提供了一些优美简洁的UIView接口，可以让我们间接地使用，让动画变得简单了许多。但是这种简单就不可避免地带来了一些灵活上的缺陷。如果你想实现一些UIView为实现的接口功能，就不得不更加全面的了解和使用Core Animation。

下面列举一些视图不具备，属于图层的特有功能：

阴影，圆角，带颜色的边框
3D变换
非矩形图像
遮罩
多级非线性动画

图层的使用

我们来创建一个非常简单的项目，一共包含两个图层，一个白色的CALayer，一个红色的CALayer，代码如下。

            //白色
        let whiteLayer = CALayer()
        whiteLayer.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
        whiteLayer.backgroundColor = UIColor.white.cgColor
        view.layer.addSublayer(whiteLayer)
        
        // 红色
        let redLayer = CALayer()
        redLayer.frame = CGRect(x: 30, y: 30, width: 40, height: 40)
        redLayer.backgroundColor = UIColor.red.cgColor
        whiteLayer.addSublayer(redLayer)

显示如下: