iOS-Core-Animation-Advanced-Techniques 转 GitHub译文

图层的树状结构

巨妖有图层,洋葱也有图层,你有吗?我们都有图层 -- 史莱克

Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么一个不怎么和动画有关的名字演变而来,所以做动画这只是Core Animation特性的冰山一角。

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

在我们讨论动画之前,我们将从图层树开始,涉及一下Core Animation的静态组合以及布局特性。

图层和视图

如果你曾经在iOS或者Mac OS平台上写过应用程序,你可能会对视图的概念比较熟悉。一个视图就是在屏幕上显示的一个矩形块(比如图片,文字或者视频),它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套,一个视图可以管理它的所有子视图的位置。图1.1显示了一种典型的视图层级关系

图1.1 一种典型的iOS屏幕(左边)和形成视图的层级关系(右边)

在iOS当中,所有的视图都从一个叫做UIVIew的基类派生而来,UIView可以处理触摸事件,可以支持基于Core Graphics绘图,可以做仿射变换(例如旋转或者缩放),或者简单的类似于滑动或者渐变的动画。

CALayer

CALayer类在概念上和UIView类似,同样也是一些被层级关系树管理的矩形块,同样也可以包含一些内容(像图片,文本或者背景色),管理子图层的位置。它们有一些方法和属性用来做动画和变换。和UIView最大的不同是CALayer不处理用户的交互。

CALayer并不清楚具体的响应链(iOS通过视图层级关系用来传送触摸事件的机制),于是它并不能够响应事件,即使它提供了一些方法来判断是否一个触点在图层的范围之内(具体见第三章,“图层的几何学”)

平行的层级关系

每一个UIview都有一个CALayer实例的图层属性,也就是所谓的backing layer,视图的职责就是创建并管理这个图层,以确保当子视图在层级关系中添加或者被移除的时候,他们关联的图层也同样对应在层级关系树当中有相同的操作(见图1.2)。

图1.2 图层的树状结构(左边)以及对应的视图层级(右边)

实际上这些背后关联的图层才是真正用来在屏幕上显示和做动画,UIView仅仅是对它的一个封装,提供了一些iOS类似于处理触摸的具体功能,以及Core Animation底层方法的高级接口。

但是为什么iOS要基于UIViewCALayer提供两个平行的层级关系呢?为什么不用一个简单的层级来处理所有事情呢?原因在于要做职责分离,这样也能避免很多重复代码。在iOS和Mac OS两个平台上,事件和用户交互有很多地方的不同,基于多点触控的用户界面和基于鼠标键盘有着本质的区别,这就是为什么iOS有UIKit和UIView,但是Mac OS有AppKit和NSView的原因。他们功能上很相似,但是在实现上有着显著的区别。

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

实际上,这里并不是两个层级关系,而是四个,每一个都扮演不同的角色,除了视图层级和图层树之外,还存在呈现树和渲染树,将在第七章“隐式动画”和第十二章“性能调优”分别讨论。

图层的能力

如果说CALayerUIView内部实现细节,那我们为什么要全面地了解它呢?苹果当然为我们提供了优美简洁的UIView接口,那么我们是否就没必要直接去处理Core Animation的细节了呢?

某种意义上说的确是这样,对一些简单的需求来说,我们确实没必要处理CALayer,因为苹果已经通过UIView的高级API间接地使得动画变得很简单。

但是这种简单会不可避免地带来一些灵活上的缺陷。如果你略微想在底层做一些改变,或者使用一些苹果没有在UIView上实现的接口功能,这时除了介入Core Animation底层之外别无选择。

我们已经证实了图层不能像视图那样处理触摸事件,那么他能做哪些视图不能做的呢?这里有一些UIView没有暴露出来的CALayer的功能:

我们将会在后续章节中探索这些功能,首先我们要关注一下在应用程序当中CALayer是怎样被利用起来的。

使用图层

首先我们来创建一个简单的项目,来操纵一些layer的属性。打开Xcode,使用Single View Application模板创建一个工程。

在屏幕中央创建一个小视图(大约200 X 200的尺寸),当然你可以手工编码,或者使用Interface Builder(随你方便)。确保你的视图控制器要添加一个视图的属性以便可以直接访问它。我们把它称作layerView

运行项目,应该能在浅灰色屏幕背景中看见一个白色方块(图1.3),如果没看见,可能需要调整一下背景window或者view的颜色

图1.3 灰色背景上的一个白色UIView

这并没有什么令人激动的地方,我们来添加一个色块,在白色方块中间添加一个小的蓝色块。

我们当然可以简单地在已经存在的UIView上添加一个子视图(随意用代码或者IB),但这不能真正学到任何关于图层的东西。

于是我们来创建一个CALayer,并且把它作为我们视图相关图层的子图层。尽管UIView类的接口中暴露了图层属性,但是标准的Xcode项目模板并没有包含Core Animation相关头文件。所以如果我们不给项目添加合适的库,是不能够使用任何图层相关的方法或者访问它的属性。所以首先需要添加QuartzCore框架到Build Phases标签(图1.4),然后在vc的.m文件中引入库。

图1.4 把QuartzCore库添加到项目

之后就可以在代码中直接引用CALayer的属性和方法。在清单1.1中,我们用创建了一个CALayer,设置了它的backgroundColor属性,然后添加到layerView背后相关图层的子图层(这段代码的前提是通过IB创建了layerView并做好了连接),图1.5显示了结果。

清单1.1 给视图添加一个蓝色子图层

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()@property (nonatomic, weak) IBOutlet UIView *layerView;

@end@implementation ViewController- (void)viewDidLoad
{[super viewDidLoad];//create sublayerCALayer *blueLayer = [CALayer layer];blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);blueLayer.backgroundColor = [UIColor blueColor].CGColor;//add it to our view[self.layerView.layer addSublayer:blueLayer];
}
@end

图1.5 白色UIView内部嵌套的蓝色CALayer

一个视图只有一个相关联的图层(自动创建),同时它也可以支持添加无数多个子图层,从清单1.1可以看出,你可以显示创建一个单独的图层,并且把它直接添加到视图关联图层的子图层。尽管可以这样添加图层,但往往我们只是见简单地处理视图,他们关联的图层并不需要额外地手动添加子图层。

在Mac OS平台,10.8版本之前,一个显著的性能缺陷就是由于用了视图层级而不是单独在一个视图内使用CALayer树状层级。但是在iOS平台,使用轻量级的UIView类并没有显著的性能影响(当然在Mac OS 10.8之后,NSView的性能同样也得到很大程度的提高)。

使用图层关联的视图而不是CALayer的好处在于,你能在使用所有CALayer底层特性的同时,也可以使用UIView的高级API(比如自动排版,布局和事件处理)。

然而,当满足以下条件的时候,你可能更需要使用CALayer而不是UIView

  • 开发同时可以在Mac OS上运行的跨平台应用
  • 使用多种CALayer的子类(见第六章,“特殊的图层“),并且不想创建额外的UIView去包封装它们所有
  • 做一些对性能特别挑剔的工作,比如对UIView一些可忽略不计的操作都会引起显著的不同(尽管如此,你可能会直接想使用OpenGL绘图)

但是这些例子都很少见,总的来说,处理视图会比单独处理图层更加方便。

总结

这一章阐述了图层的树状结构,说明了如何在iOS中由UIView的层级关系形成的一种平行的CALayer层级关系,在后面的实验中,我们创建了自己的CALayer,并把它添加到图层树中。

在第二章,“图层关联的图片”,我们将要研究一下CALayer关联的图片,以及Core Animation提供的操作显示的一些特性。

iOS-Core Animation 核心动画高级编程/1-图层树相关推荐

  1. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  2. iOS-Core Animation 核心动画高级编程/3-图层几何学

    图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...

  3. iOS-Core Animation 核心动画高级编程/5-变换

    变换 很不幸,没人能告诉你母体是什么,你只能自己体会 -- 骇客帝国 在第四章"可视效果"中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对 ...

  4. iOS - Core Animation 核心动画的使用

    1.简单使用示例 1.1 时钟 QClockView.h @interface QClockView : UIView/// 创建时钟界面+ (instancetype)q_clockViewWith ...

  5. iOS开发 - Core Animation 核心动画

    Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现 ...

  6. Core Animation(核心动画)

    iOS开发UI篇-核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量 ...

  7. 五 iOS之 Core Animation(核心动画)

    核心动画继承结构 开发步骤 1.首先得有CALayer 2.初始化一个CAAnimation对象,并设置一些动画相关属性 3.通过调用CALayer的addAnimation:forKey:方法,增加 ...

  8. iOS核心动画高级技术(九) 图层时间

    The biggest difference between time and space is that you can't reuse time. 时间和空间最大的区别在于,时间不能被复用 -- ...

  9. Core Animation核心动画的使用

    什么是核心动画 核心动画就是CoreAnimation直译过来的中文,它是一组非常强大的动画处理API,只需要使用少量代码就能实现炫酷的动画效果. 核心动画的好处 核心动画可以跨平台使用,Mac OS ...

  10. iOS Core Animation学习总结(2)--实现自定义图层

    一. 创建图层继承于CALayer,并在子类实现drawInContext方法 @interface CTLayer : CALayer@end@implementation CTLayer -(vo ...

最新文章

  1. Vue2.0使用vue-cli脚手架搭建
  2. postman设置域名_Postman中文文档——证书(Certificates)
  3. 程序员面试题精选100题(38)-输出1到最大的N位数[算法]
  4. 基于libmad的MP3解码播放器
  5. SPOJ - OPTM Optimal Marks(进制拆分+最小割)
  6. Codeforces Round #653 (Div. 3)
  7. 8万行的insert数据,Ctrl+c、Ctrl+v后心态崩了(如何在Linux下对MySQL数据库执行sql文件)...
  8. 河南招教考试计算机专业知识,河南教师招聘考试《计算机网络技术基础》知识点归纳七...
  9. 二叉查找树与平衡二叉树【转载】
  10. 中断、轮询、事件驱动、消息驱动、数据流驱动(Flow-Driven)?
  11. VMware提供的几种工作模式?
  12. android vrs技术,VRS技术分析研究及应用
  13. 在IE浏览器中url传参长度问题
  14. C++自定义sort排序
  15. 阿里架构师墙裂推荐Java岗实战文档:Spring全家桶+Docker+Redis
  16. 小牛电动车能跑多快、多远?一起来了解一下
  17. CSU——1043克里莫
  18. 2016.8.6 学习总结
  19. Window10系统下触摸板失灵了 该咋处理
  20. 多懂点SQL可以写出更好的接口

热门文章

  1. 连续存储结构的循环队列实现
  2. 4星|《为何要提升员工的幸福感》:幸福感最高的三大要素是:感恩的习惯、开放的心态,从错误中学习的能力,以及拥有自己的人生意义...
  3. (13)碎片化阅读只会让你变得越来越愚蠢
  4. 无线网桥连接的监控接入局域网卡顿问题,请大神帮忙排查原因
  5. 抢占系统调用执行时间过长的goroutine(22)
  6. 半自动的行人重识别数据标注算法Tracking + infomap
  7. 八款前端实用的富文本编辑器插件
  8. mybatis主表与明细表一对多的同时插入操作
  9. python --生成时间序列,作为横轴的标签。时间跨越2008-2022年,生成每年的6-10月的第一天作为时间序列
  10. 微博视频发布软件原创视频素材哪里下载