CALayer---iOS-Apple苹果官方文档翻译之CALayer

CHENYILONG

• Blog

CALayer---iOS-Apple苹果官方文档翻译之CALayer

---

CALayer

/*技术博客http://www.cnblogs.com/ChenYilong/新浪微博http://weibo.com/luohanchenyilong */

 

CALayer简介

• Core Animation是跨平台的,支持iOS环境和Mac OS X环境!

• 注意:凡是支持跨平台的框架,都不能直接使用UIKit框架,因为UIKit 框架只能应用在iOS而不能用于Mac!

  !

• 学习核心动画之前,需要先理解CALayer,因为核心动画操作的对象 是CALayer,而不是UIView!

  !

• CALayer是核心动画的基础,可以做圆角、阴影、边框等效果! !

• 每个UIView内部都有一个Layer的属性! !

• 在实现核心动画时,本质上是将CALayer中的内容转换成位图(一种 图像格式),从而便于图形硬件的操纵

UIView的CALayer基本演练
• 演练设置UIView中的CALayer属性!

- 圆角、边框、阴影及3D形变属性! !

• 注意:!
1. 在UIView中CALayer只是一个类声明,需要添加QuartzCore框架! 2. 在使用颜色时,不能直接使用UIColor而需要将颜色转成CGColor!

3. 修改图层相当于修改UIView属性,即修改了界面属性!
4. 要设置阴影,需要同时指定阴影的偏移尺寸、颜色和透明度! 5. 形变属性既可以用形变函数指定,也可以用keyPath指定

UIImageView的CALayer基本演练

• 演练1.设置UIImageView中的CALayer属性 - 圆角、边框、阴影!
- 注意:!

• UIImageView中不仅一个子图层,因此设置圆角时需要使用 setMasksToBounds:YES,让所有子图层跟随边框,不过设置

该属性后,无法使用阴影效果!
• 解决办法:可以在底层附加一个UIView实现阴影效果!

• 演练2.设置UIImageView中的CALayer属性!

• -   transform!

• -   说明:transform属性可以调整CALayer的形变,其中包括:旋转、 缩放、平移!

• -   transform属性的参数查询:CATransform

 

 

CALayer中的圆角半径的示意图

transform属性表

keyPath	说明
rotation.x	X轴旋转角度NSNumber
rotation.y	Y轴旋转角度NSNumber
rotation.z	Z轴旋转角度NSNumber
rotation	Z轴旋转角度NSNumber
scale.x	X轴缩放比例NSNumber
scale.y	Y轴缩放比例NSNumber
scale.z	Z轴缩放比例NSNumber
scale	三个轴缩放比例NSNumber
translation.x	X轴平移量NSNumber
translation.y	Y轴平移量NSNumber
translation.z	Z轴平移量NSNumber
translation	X,Y轴平移量的NSValue CGPoint的包装

图层和视图之间的关系

• 创建视图对象时,视图会自己创建一个层,视图在绘图(如

drawRect:)时,会将内容画在自己的层上。当视图在层上完成绘图

后,系统会将图层拷贝至屏幕(CALayer绘图的上下文是图像,整个 画完后,才显示,提前绘制提高性能以及用户体验)。每个视图都有 一个层,每个图层又可以有多个子层!

!

• 提示:!
1. Layer的设计目的不是为了取代视图,不能基于CALayer创建一个

独立的可视化组件!
2. Layer的设计目的是提供视图的基本可视内容,以便提高动画的

执行效率!

3. 除提供可视内容外,Layer不负责视图的事件响应等工作,同时 Layer不能参与到响应者链条中

CALayer层次结构图

CALayer的使用说明

• 通过UIView的layer属性可以拿到对应的根层,这个层不允许重新创建,但可以

  往层里面添加子层(调用CALayer的addSublayer)!

• 要具体使用CALayer,需要引入!

• 获取当前图层或使用静态方法layer初始化CALayer后,可以设置以下属性:

  1. bounds:宽度和高度!

  2. position:位置(默认指中心点,具体由anchorPoint决定)!

  3. anchorPoint:锚点(x,y的范围都是0-1),决定了position的含义!

  4. backgroundColor: 背景颜色(CGColorRef类型)!

  5. borderColor:边框颜色(CGColorRef类型)!

  6. borderWidth:边框宽度!

  7. cornerRadius:圆角半径!

  8. contents: 内容(比如设置为图片CGImageRef)!

• 注意:虽然CALayer可以使用frame,但最好还是使用bounds和position。为层设 置动画时,用bounds和position会方便一点

演练2--创建自定义图层

• 演练: 创建自定义图层,并设置以下属性:!
• bounds:宽度和高度!
• backgroundColor: 背景颜色(CGColorRef类型)!
• position:位置(默认指中点,具体由anchorPoint决定)!
• anchorPoint:锚点(x,y的范围都是0-1),决定了position的含义! • contents:内容CGImageRef!

!

• 注意:!
1. 注意锚点和位置的关系,以及在旋转转换时对图层的影响!

2. UIView有一个addSubview方法,而layer有一个addSubLayer方法!

!

• 提示:!
- 锚点在游戏开发中使用比较频繁,而在应用开发中极少使用

 

CALayer中图像及颜色的注意事项• 注意:!

- CALayer中使用CGColorRef和CGImageRef的数据类型,而不用 UIColor和UIImage!

• 原因:!

- QuartzCore(包含CALayer类)和Core Graphics(包含 CGImageRef、CGColorRef)框架都能在iOS和Mac OS X上使

用,但是UIKit(包含UIImage和其他UI开头的类)只能在iOS中使 用!

- 为了保证可移植性,QuartzCore不能使用UIImage,只能使用 CGImageRef!

- 不过很多情况下,可以通过UIKit对象的特定方法,可以得到Core Graphics对象,如UIImage的CGImage方法和UIColor的CGColor

方法

CALayer的隐式动画属性

• 每一个UIView内部都默认关联着一个CALayer,称这个Layer为Root Layer。所有

  的非Root Layer都存在着隐式动画,隐式动画的默认时长为1/4秒。!

  !

• 当修改非Root Layer的部分属性时,相应的修改会自动产生动画效果,能执行隐式 动画的属性被称为“可动画属性”,诸如:!

  1. bounds: 缩放动画!

  2. position: 平移动画!

!3. opacity: 淡入淡出动画(改变透明度)!

• 在文档中搜素animatable可以找到所有可动画属性! !

• 如果要关闭默认的动画效果,可以通过动画事务方法实现:! [CATransaction begin];!
[CATransaction setDisableActions:YES];!
// ...

 [CATransaction commit]; 

演练3--CALayer的隐式动画 • 创建自定义图层!

• 在触摸事件中,设置图层的可动画属性:! -位置!

- 颜色!
- 透明度!
- 边框!
- 圆角!
- 旋转角度! - 内容!

- ......

在CALayer上绘图
• 要在CALayer上绘图,有两种方法:

1. 创建一个CALayer的子类,然后覆盖drawInContext:方法,可以 使用Quartz2D API在其中进行绘图!

2. 设置CALayer的delegate,然后让delegate实现drawLayer:inContext:方法进行绘图!

• 注意:!
- 不能再将UIView设置为这个CALayer的delegate,因为UIView对象

已经是内部层的delegate,再次设置会出问题!

- 无论使用哪种方法,都必须向层发送setNeedsDisplay消息,以触 发相应绘图方法的调用

CALayer、UIView以及上下文之间的关系

• 当UIView收到setNeedsDisplay消息时,CALayer会准备好一个 CGContextRef,然后向它的delegate即UIView,发送消息,并且传入 已经准备好的CGContextRef对象。UIView在drawLayer:inContext:方 法中会调用自己的drawRect:方法!

!

• 平时在drawRect:中通过UIGraphicsGetCurrentContext()获取的就是由CALayer传入的CGContextRef对象,在drawRect:中完成的所有绘图 都会填入CALayer的CGContextRef中,然后被拷贝至屏幕!

!

• CALayer的CGContextRef用的是位图上下文(Bitmap Graphics Context)

CALayer绘图演练

• 演练重点:!
• 以自定义Layer的方式实现绘图! • 利用坐标系缩放比例翻转图像

 

获取CALayer中的内容--截屏

UIGraphicsBeginImageContext(self.view.bounds.size);

[self.view.layerrenderInContext:UIGraphicsGetCurrentContext()];!

UIImage *image =UIGraphicsGetImageFromCurrentImageContext();!

UIGraphicsEndImageContext(); 

!

说明:使用renderInContext方法可以将指定图层及其子图层中的内容渲 染输出到指定的上下文中

本节知识点回顾

• 每个UIView内部都有一个Layer的属性!

• 要具体使用CALayer,需要引入!

• CALayer中使用CGColorRef和CGImageRef的数据类型,而不用 UIColor和UIImage!

• 所有的非Root Layer都存在着隐式动画!

• 创建一个CALayer的子类,然后覆盖drawInContext:方法,可以使用

  Quartz2D API在其中进行绘图!

• 在实现核心动画时,本质上是将CALayer中的内容转换成位图,从而 便于图形硬件的操纵

© chenyilong. Powered by Postach.io

• Blog