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

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



CALayer

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

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

CALayer简介

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

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

    !

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

    !

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

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

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

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

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

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

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

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

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

UIImageViewCALayer基本演练

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

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

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

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

  • -   transform!

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

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

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

CALayer中的圆角半径的示意图

CALayer---iOS-Apple苹果官方文档翻译之CALayer
CALayer---iOS-Apple苹果官方文档翻译之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---iOS-Apple苹果官方文档翻译之CALayer

CALayer层次结构图

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

CALayer的使用说明

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

    往层里面添加子层(调用CALayeraddSublayer)!

  • 要具体使用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,但最好还是使用boundsposition。为层设 置动画时,用boundsposition会方便一点

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

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

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

!

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

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

!

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

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

 

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

- CALayer中使用CGColorRefCGImageRef的数据类型,而不用 UIColorUIImage!

? 原因:!

- QuartzCore(包含CALayer类)和Core Graphics(包含 CGImageRefCGColorRef)框架都能在iOSMac OS X上使

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

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

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

方法

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

CALayer的隐式动画属性

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

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

    !

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

    1. bounds: 缩放动画!

    2. position: 平移动画!

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

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

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

 [CATransaction commit]; 
CALayer---iOS-Apple苹果官方文档翻译之CALayer

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

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

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

- ......

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

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

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

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

? 注意:!
- 不能再将UIView设置为这个CALayerdelegate,因为UIView对象

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

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

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

CALayerUIView以及上下文之间的关系

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

!

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

!

? CALayerCGContextRef用的是位图上下文(Bitmap Graphics Context)

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

CALayer绘图演练

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

CALayer---iOS-Apple苹果官方文档翻译之CALayer
CALayer---iOS-Apple苹果官方文档翻译之CALayer
 
获取CALayer中的内容--截屏
UIGraphicsBeginImageContext(self.view.bounds.size);

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

UIImage *image =UIGraphicsGetImageFromCurrentImageContext();!

UIGraphicsEndImageContext(); 

!

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

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

本节知识点回顾

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

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

  • CALayer中使用CGColorRefCGImageRef的数据类型,而不用 UIColorUIImage!

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

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

    Quartz2D API在其中进行绘图!

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

CALayer---iOS-Apple苹果官方文档翻译之CALayer
chenyilong. Powered by Postach.io

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

上一篇:【转】Android设计中的.9.png


下一篇:iOS数据存取---iOS-Apple苹果官方文档翻译