引言
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 = .redself.view.addSubview(view)let subGreenView = UIView(frame: CGRect(x: 25, y: 10, width: 50, height: 50))subGreenView.backgroundColor = .greenview.addSubview(subGreenView)let subBlueView = UIView(frame: CGRect(x: 25, y: 75, width: 50, height: 50))subBlueView.backgroundColor = .blueview.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.cgColorview.layer.addSublayer(whiteLayer)// 红色let redLayer = CALayer()redLayer.frame = CGRect(x: 30, y: 30, width: 40, height: 40)redLayer.backgroundColor = UIColor.red.cgColorwhiteLayer.addSublayer(redLayer)
显示如下:
我们在白色图层上面添加了一个红色图层,当然还可以添加更多的图层,同样我们还可以在红色的图层上也添加更多的图层,这样就会形成一个树状的结构,通常就是我们常说的图层树。
总结
本篇博客主要阐述了图层的树状结构,并且自己创了CALayer并把它添加到了图层树中。
通过上面的介绍我们已经对Core Animation框架的基础有了初步的了解,下面的博客我们介绍到与图层相关联的图片,已经Core Animation提供的操作显示的一些特性。