iOS核心动画高级技巧-1

1. 图层树

图层的树状结构

巨妖有图层，洋葱也有图层，你有吗？咱们都有图层 -- 史莱克

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

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

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

1.1 图层与视图

图层与视图

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

1.2 图层的能力

图层的能力

若是说CALayer是UIView内部实现细节，那咱们为何要全面地了解它呢？苹果固然为咱们提供了优美简洁的UIView接口，那么咱们是否就不必直接去处理Core Animation的细节了呢？

一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个个人iOS交流群：1012951431， 分享BAT,阿里面试题、面试经验，讨论技术， 你们一块儿交流学习成长！但愿帮助开发者少走弯路。

某种意义上说的确是这样，对一些简单的需求来讲，咱们确实不必处理CALayer，由于苹果已经经过UIView的高级API间接地使得动画变得很简单。

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

咱们已经证明了图层不能像视图那样处理触摸事件，那么他能作哪些视图不能作的呢？这里有一些UIView没有暴露出来的CALayer的功能：

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

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

1.3 使用图层

使用图层

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

在屏幕中央建立一个小视图（大约200 X 200的尺寸），固然你能够手工编码，或者使用Interface Builder（随你方便）。确保你的视图控制器要添加一个视图的属性以即可以直接访问它。咱们把它称做layerView。

运行项目，应该能在浅灰色屏幕背景中看见一个白色方块，若是没看见，可能须要调整一下背景window或者view的颜色

以后就能够在代码中直接引用CALayer的属性和方法。在清单1.1中，咱们用建立了一个CALayer，设置了它的backgroundColor属性，而后添加到layerView背后相关图层的子图层（这段代码的前提是经过IB建立了layerView并作好了链接），图1.5显示告终果。

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

#import "ViewController.h"
#import 
@interface ViewController ()

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

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create sublayer
    CALayer *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.4 总结

总结

这一章阐述了图层的树状结构，说明了如何在iOS中由UIView的层级关系造成的一种平行的CALayer层级关系，在后面的实验中，咱们建立了本身的CALayer，并把它添加到图层树中。

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

2. 寄宿图

寄宿图

图片赛过千言万语，界面抵得上千图片 ——Ben Shneiderman

咱们在第一章『图层树』中介绍了CALayer类并建立了一个简单的有蓝色背景的图层。背景颜色还好啦，可是若是它仅仅是展示了一个单调的颜色未免也太无聊了。事实上CALayer类可以包含一张你喜欢的图片，这一章节咱们未来探索CALayer的寄宿图（即图层中包含的图）。

2.1 contents属性

contents属性

CALayer 有一个属性叫作contents，这个属性的类型被定义为id，意味着它能够是任何类型的对象。在这种状况下，你能够给contents属性赋任何值，你的app仍然可以编译经过。可是，在实践中，若是你给contents赋的不是CGImage，那么你获得的图层将是空白的。

contents这个奇怪的表现是由Mac OS的历史缘由形成的。它之因此被定义为id类型，是由于在Mac OS系统上，这个属性对CGImage和NSImage类型的值都起做用。若是你试图在iOS平台上将UIImage的值赋给它，只能获得一个空白的图层。一些初识Core Animation的iOS开发者可能会对这个感到困惑。

头疼的不只仅是咱们刚才提到的这个问题。事实上，你真正要赋值的类型应该是CGImageRef，它是一个指向CGImage结构的指针。UIImage有一个CGImage属性，它返回一个"CGImageRef",若是你想把这个值直接赋值给CALayer的contents，那你将会获得一个编译错误。由于CGImageRef并非一个真正的Cocoa对象，而是一个Core Foundation类型。

尽管Core Foundation类型跟Cocoa对象在运行时貌似很像（被称做toll-free bridging），他们并非类型兼容的，不过你能够经过bridged关键字转换。若是要给图层的寄宿图赋值，你能够按照如下这个方法：

layer.contents = (__bridge id)image.CGImage;

若是你没有使用ARC（自动引用计数），你就不须要 __bridge 这部分。可是，你干吗不用ARC？！

让咱们来继续修改咱们在第一章新建的工程，以便可以展现一张图片而不只仅是一个背景色。咱们已经用代码的方式创建一个图层，那咱们就不须要额外的图层了。那么咱们就直接把layerView的宿主图层的contents属性设置成图片。

清单2.1 更新后的代码。

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad]; //load an image
  UIImage *image = [UIImage imageNamed:@"Snowman.png"];

  //add it directly to our view's layer
  self.layerView.layer.contents = (__bridge id)image.CGImage;
}
@end

图表2.1 在UIView的宿主图层中显示一张图片

咱们用这些简单的代码作了一件颇有趣的事情：咱们利用CALayer在一个普通的UIView中显示了一张图片。这不是一个UIImageView，它不是咱们一般用来展现图片的方法。经过直接操做图层，咱们使用了一些新的函数，使得UIView更加有趣了。

contentGravity

你可能已经注意到了咱们的雪人看起来有点。。。胖 ＝＝！ 咱们加载的图片并不恰好是一个方的，为了适应这个视图，它有一点点被拉伸了。在使用UIImageView的时候遇到过一样的问题，解决方法就是把contentMode属性设置成更合适的值，像这样：

view.contentMode = UIViewContentModeScaleAspectFit;

这个方法基本和咱们遇到的状况的解决方法已经接近了（你能够试一下 :) ），不过UIView大多数视觉相关的属性好比contentMode，对这些属性的操做实际上是对对应图层的操做。

CALayer与contentMode对应的属性叫作contentsGravity，可是它是一个NSString类型，而不是像对应的UIKit部分，那里面的值是枚举。contentsGravity可选的常量值有如下一些：

• kCAGravityCenter
• kCAGravityTop
• kCAGravityBottom
• kCAGravityLeft
• kCAGravityRight
• kCAGravityTopLeft
• kCAGravityTopRight
• kCAGravityBottomLeft
• kCAGravityBottomRight
• kCAGravityResize
• kCAGravityResizeAspect
• kCAGravityResizeAspectFill

和cotentMode同样，contentsGravity的目的是为了决定内容在图层的边界中怎么对齐，咱们将使用kCAGravityResizeAspect，它的效果等同于UIViewContentModeScaleAspectFit， 同时它还能在图层中等比例拉伸以适应图层的边界。

self.layerView.layer.contentsGravity = kCAGravityResizeAspect;

图2.2 能够看到结果

图2.3 用错误的contentsScale属性显示Retina图片

如你所见，咱们的雪人不只有点大还有点像素的颗粒感。那是由于和UIImage不一样，CGImage没有拉伸的概念。当咱们使用UIImage类去读取咱们的雪人图片的时候，他读取了高质量的Retina版本的图片。可是当咱们用CGImage来设置咱们的图层的内容时，拉伸这个因素在转换的时候就丢失了。不过咱们能够经过手动设置contentsScale来修复这个问题（如2.2清单），图2.4是结果

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad]; //load an image
  UIImage *image = [UIImage imageNamed:@"Snowman.png"]; //add it directly to our view's layer
  self.layerView.layer.contents = (__bridge id)image.CGImage; //center the image
  self.layerView.layer.contentsGravity = kCAGravityCenter;

  //set the contentsScale to match image
  self.layerView.layer.contentsScale = image.scale;
}

@end

图2.5 使用masksToBounds来修建图层内容

contentsRect

CALayer的contentsRect属性容许咱们在图层边框里显示寄宿图的一个子域。这涉及到图片是如何显示和拉伸的，因此要比contentsGravity灵活多了和bounds，frame不一样，contentsRect不是按点来计算的，它使用了单位坐标，单位坐标指定在0到1之间，是一个相对值（像素和点就是绝对值）。因此他们是相对与寄宿图的尺寸的。iOS使用了如下的坐标系统：

• 点 —— 在iOS和Mac OS中最多见的坐标体系。点就像是虚拟的像素，也被称做逻辑像素。在标准设备上，一个点就是一个像素，可是在Retina设备上，一个点等于2*2个像素。iOS用点做为屏幕的坐标测算体系就是为了在Retina设备和普通设备上能有一致的视觉效果。
• 像素 —— 物理像素坐标并不会用来屏幕布局，可是仍然与图片有相对关系。UIImage是一个屏幕分辨率解决方案，因此指定点来度量大小。可是一些底层的图片表示如CGImage就会使用像素，因此你要清楚在Retina设备和普通设备上，他们表现出来了不一样的大小。
• 单位 —— 对于与图片大小或是图层边界相关的显示，单位坐标是一个方便的度量方式， 当大小改变的时候，也不须要再次调整。单位坐标在OpenGL这种纹理坐标系统中用得不少，Core Animation中也用到了单位坐标。

默认的contentsRect是{0, 0, 1, 1}，这意味着整个寄宿图默认都是可见的，若是咱们指定一个小一点的矩形，图片就会被裁剪（如图2.6）

2.2 Custom Drawing

Custom Drawing

给contents赋CGImage的值不是惟一的设置寄宿图的方法。咱们也能够直接用Core Graphics直接绘制寄宿图。可以经过继承UIView并实现-drawRect:方法来自定义绘制。

-drawRect: 方法没有默认的实现，由于对UIView来讲，寄宿图并非必须的，它不在乎那究竟是单调的颜色仍是有一个图片的实例。若是UIView检测到-drawRect: 方法被调用了，它就会为视图分配一个寄宿图，这个寄宿图的像素尺寸等于视图大小乘以 contentsScale的值。

若是你不须要寄宿图，那就不要建立这个方法了，这会形成CPU资源和内存的浪费，这也是为何苹果建议：若是没有自定义绘制的任务就不要在子类中写一个空的-drawRect:方法。

当视图在屏幕上出现的时候 -drawRect:方法就会被自动调用。-drawRect:方法里面的代码利用Core Graphics去绘制一个寄宿图，而后内容就会被缓存起来直到它须要被更新（一般是由于开发者调用了-setNeedsDisplay方法，尽管影响到表现效果的属性值被更改时，一些视图类型会被自动重绘，如bounds属性）。虽然-drawRect:方法是一个UIView方法，事实上都是底层的CALayer安排了重绘工做和保存了所以产生的图片。

CALayer有一个可选的delegate属性，实现了CALayerDelegate协议，当CALayer须要一个内容特定的信息时，就会从协议中请求。CALayerDelegate是一个非正式协议，其实就是说没有CALayerDelegate @protocol可让你在类里面引用啦。你只须要调用你想调用的方法，CALayer会帮你作剩下的。（delegate属性被声明为id类型，全部的代理方法都是可选的）。

当须要被重绘时，CALayer会请求它的代理给他一个寄宿图来显示。它经过调用下面这个方法作到的:

(void)displayLayer:(CALayerCALayer *)layer;

趁着这个机会，若是代理想直接设置contents属性的话，它就能够这么作，否则没有别的方法能够调用了。若是代理不实现-displayLayer:方法，CALayer就会转而尝试调用下面这个方法：

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;

在调用这个方法以前，CALayer建立了一个合适尺寸的空寄宿图（尺寸由bounds和contentsScale决定）和一个Core Graphics的绘制上下文环境，为绘制寄宿图作准备，他做为ctx参数传入。

让咱们来继续第一章的项目让它实现CALayerDelegate并作一些绘图工做吧（见清单2.5）.图2.12是他的结果

清单2.5 实现CALayerDelegate

@implementation ViewController
- (void)viewDidLoad
{
  [super viewDidLoad];
  
  //create sublayer
  CALayer *blueLayer = [CALayer layer];
  blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
  blueLayer.backgroundColor = [UIColor blueColor].CGColor;

  //set controller as layer delegate
  blueLayer.delegate = self;

  //ensure that layer backing image uses correct scale
  blueLayer.contentsScale = [UIScreen mainScreen].scale; //add layer to our view
  [self.layerView.layer addSublayer:blueLayer];

  //force layer to redraw
  [blueLayer display];
}

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
  //draw a thick red circle
  CGContextSetLineWidth(ctx, 10.0f);
  CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
  CGContextStrokeEllipseInRect(ctx, layer.bounds);
}
@end

2.3 总结

总结

本章介绍了寄宿图和一些相关的属性。你学到了如何显示和放置图片， 使用拼合技术来显示， 以及用CALayerDelegate和Core Graphics来绘制图层内容。

在第三章，"图层几何学"中，咱们将会探讨一下图层的几何，观察他们是如何放置和改变相互的尺寸的

转载地址：https://www.w3cschool.cn/ayuxgu/