CoreAnimation(一)-图层

图层树

  • 图层与视图
  • 图层的能力
  • 使用图层
  • 总结

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

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

一: 图层与视图

一个视图就是在屏幕上显示的一个矩形块, 他能够拦截类似鼠标点击或者触摸手势等输入行为, 视图在层级关系中可以互相嵌套, 一个视图可以管理他的所有子视图的位置


一种典型的iOS屏幕和形成视图的层级关系

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

1.1: CALayer

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

CALayer并不清楚具体的响应链(iOS通过视图层级关系来传送触摸事件的机制), 于是他不能够响应事件, 即使她提供了一些方法来判断是否一个触电是否在图层范围内

1.2: 平行的层级关系

每个UIView都有一个CALayer实例的图层属性, 也就是所谓的backing layer, 视图的职责是创建并管理这个图层, 以确保子视图在层级关系中添加和移除的时候, 他们关联页同样对应层级关系书当中的相同操作
[图片上传失败...(image-e7891f-1512703987307)]

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

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

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

实际上, 这里并不是两个层级关系, 而是四个,每一个都扮演不同的角色, 除了视图层级和图层树之外, 还存在呈现树和渲染树.

1.3: 图层的能力

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

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

我们已经证实图层不能像视图那样带来一些灵活上的缺陷, UIView缺少CALayer的功能

  • 阴影 圆角 带颜色的边框
  • 3D变换
  • 非矩形范围
  • 透明遮罩
  • 多级非线性动画
1.4:使用图层

首先我们来创建一个简单的图层, 从屏幕中央创建一个小视图(200*200),


灰色的视图有一个白色的小视图

我们来创建一个CALayer, 并且把它作为我们视图相关图层的子图层, 我们创建一个CALayer, 设置他的backgroundColor属性, 然后添加到相应的Layer上。

[图片上传失败...(image-60588-1512703987307)]

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong)UIView *whiteView;
@property (nonatomic, strong)CALayer *blueLayer;
@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor grayColor];
  [self.view addSubview:self.whiteView];
  [self.whiteView.layer addSublayer:self.blueLayer];
}


- (UIView *)whiteView{
  if (_whiteView == nil) {
    _whiteView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    _whiteView.backgroundColor = [UIColor whiteColor];
    _whiteView.center = self.view.center;
  }
  return _whiteView;
}

- (CALayer *)blueLayer{
  if (_blueLayer == nil) {
    _blueLayer = [CALayer layer];
    _blueLayer.frame = CGRectMake(50, 50, 100, 100);

    _blueLayer.backgroundColor = [UIColor blueColor].CGColor;
  }
  return _blueLayer;
}
@end

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

如果满足一下的条件, 你可能需要使用CALayer而不是UIView

  • 开发同时可以在Mac OS上允许的跨平台应用
  • 使用多种CALayer的子类, 并且不想创建额外的UIView去包装他们所有
  • 做一些对性能特别挑剔的工作, 比如对UIView一些可以忽略不计的操作都会引起显著的不同

处理视图比处理Layer要方便一些

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容