CALayer---iOS-Apple苹果官方文档翻译之CALayer
-
Core Animation是跨平台的,支持iOS环境和Mac OS X环境
-
注意:凡是支持跨平台的框架,都不能直接使用UIKit框架,因为UIKit 框架只能应用在iOS而不能用于Mac
-
学习核心动画之前,需要先理解CALayer,因为核心动画操作的对象 是CALayer,而不是UIView
-
CALayer是核心动画的基础,可以做圆角、阴影、边框等效果
-
每个UIView内部都有一个Layer的属性
-
在实现核心动画时,本质上是将CALayer中的内容转换成位图(一种 图像格式),从而便于图形硬件的操纵
![page2image4288](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
UIView的CALayer基本演练
• 演练设置UIView中的CALayer属性
– 圆角、边框、阴影及3D形变属性
• 注意:
1. 在UIView中CALayer只是一个类声明,需要添加QuartzCore框架 2. 在使用颜色时,不能直接使用UIColor而需要将颜色转成CGColor
3. 修改图层相当于修改UIView属性,即修改了界面属性
4. 要设置阴影,需要同时指定阴影的偏移尺寸、颜色和透明度 5. 形变属性既可以用形变函数指定,也可以用keyPath指定
![page4image3112](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
UIImageView的CALayer基本演练
• 演练1.设置UIImageView中的CALayer属性 – 圆角、边框、阴影
– 注意:
• UIImageView中不仅一个子图层,因此设置圆角时需要使用 setMasksToBounds:YES,让所有子图层跟随边框,不过设置
该属性后,无法使用阴影效果
• 解决办法:可以在底层附加一个UIView实现阴影效果
• 演练2.设置UIImageView中的CALayer属性
-
– transform
-
– 说明:transform属性可以调整CALayer的形变,其中包括:旋转、 缩放、平移
-
– transform属性的参数查询:CATransform
![page5image4032](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
CALayer中的圆角半径的示意图
![page7image1168](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
![page7image1328](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/79f033d1-b1b9-4ab8-a594-01af4b8b3883.png?resizeSmall&width=832)
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不能参与到响应者链条中
![page9image4128](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
CALayer层次结构图
![page10image1168](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
![page10image1328](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/cc072c59-d7c0-4f87-8cbf-9c00ce238a2a.png?resizeSmall&width=832)
CALayer的使用说明
-
通过UIView的layer属性可以拿到对应的根层,这个层不允许重新创建,但可以
往层里面添加子层(调用CALayer的addSublayer)
-
要具体使用CALayer,需要引入<QuartzCore/QuartzCore.h>
-
获取当前图层或使用静态方法layer初始化CALayer后,可以设置以下属性:
-
bounds:宽度和高度
-
position:位置(默认指中心点,具体由anchorPoint决定)
-
anchorPoint:锚点(x,y的范围都是0-1),决定了position的含义
-
backgroundColor: 背景颜色(CGColorRef类型)
-
borderColor:边框颜色(CGColorRef类型)
-
borderWidth:边框宽度
-
cornerRadius:圆角半径
-
contents: 内容(比如设置为图片CGImageRef)
-
-
注意:虽然CALayer可以使用frame,但最好还是使用bounds和position。为层设 置动画时,用bounds和position会方便一点
![page11image5192](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
演练2——创建自定义图层
• 演练: 创建自定义图层,并设置以下属性:
• bounds:宽度和高度
• backgroundColor: 背景颜色(CGColorRef类型)
• position:位置(默认指中点,具体由anchorPoint决定)
• anchorPoint:锚点(x,y的范围都是0-1),决定了position的含义 • contents:内容CGImageRef
• 注意:
1. 注意锚点和位置的关系,以及在旋转转换时对图层的影响
2. UIView有一个addSubview方法,而layer有一个addSubLayer方法
• 提示:
– 锚点在游戏开发中使用比较频繁,而在应用开发中极少使用
![page12image4224](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
//转载请注明出处--本文永久链接:http://www.cnblogs.com/ChenYilong/p/3493222.html
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
方法
![page14image4176](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
CALayer的隐式动画属性
-
每一个UIView内部都默认关联着一个CALayer,称这个Layer为Root Layer。所有
的非Root Layer都存在着隐式动画,隐式动画的默认时长为1/4秒。
-
当修改非Root Layer的部分属性时,相应的修改会自动产生动画效果,能执行隐式 动画的属性被称为“可动画属性”,诸如:
-
bounds: 缩放动画
-
position: 平移动画
-
3. opacity: 淡入淡出动画(改变透明度)
• 在文档中搜素animatable可以找到所有可动画属性
• 如果要关闭默认的动画效果,可以通过动画事务方法实现: [CATransaction begin];
[CATransaction setDisableActions:YES];
// ...
[CATransaction commit];
![page15image5120](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
演练3——CALayer的隐式动画 • 创建自定义图层
• 在触摸事件中,设置图层的可动画属性: – 位置
– 颜色
– 透明度
– 边框
– 圆角
– 旋转角度 – 内容
– ......
//转载请注明出处--本文永久链接:http://www.cnblogs.com/ChenYilong/p/3493222.html
![page16image3336](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
在CALayer上绘图
• 要在CALayer上绘图,有两种方法:
1. 创建一个CALayer的子类,然后覆盖drawInContext:方法,可以 使用Quartz2D API在其中进行绘图
2. 设置CALayer的delegate,然后让delegate实现 drawLayer:inContext:方法进行绘图
• 注意:
– 不能再将UIView设置为这个CALayer的delegate,因为UIView对象
已经是内部层的delegate,再次设置会出问题
– 无论使用哪种方法,都必须向层发送setNeedsDisplay消息,以触 发相应绘图方法的调用
![page17image3440](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
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)
![page18image3464](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
CALayer绘图演练
• 演练重点:
• 以自定义Layer的方式实现绘图 • 利用坐标系缩放比例翻转图像
![page19image1832](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
![page19image1992](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/dbb56d26-f5c9-4973-b860-3d1f72828bb7.png?resizeSmall&width=832)
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
说明:使用renderInContext方法可以将指定图层及其子图层中的内容渲 染输出到指定的上下文中
![page21image3432](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
本节知识点回顾
-
每个UIView内部都有一个Layer的属性
-
要具体使用CALayer,需要引入<QuartzCore/QuartzCore.h>
-
CALayer中使用CGColorRef和CGImageRef的数据类型,而不用 UIColor和UIImage
-
所有的非Root Layer都存在着隐式动画
-
创建一个CALayer的子类,然后覆盖drawInContext:方法,可以使用
Quartz2D API在其中进行绘图
-
在实现核心动画时,本质上是将CALayer中的内容转换成位图,从而 便于图形硬件的操纵
![page22image3560](https://www.evernote.com/shard/s227/sh/b5620719-a63c-4ac0-8c27-2fbc6a38d2c9/a93cf21128078f88e7b811c6a8751319/res/1d0c0763-6001-41ad-ac9b-cdc6d4fdf442.png?resizeSmall&width=832)
作者:
出处:http://www.cnblogs.com/ChenYilong/(点击RSS订阅)
本文版权归作者和博客园共有,欢迎转载,
但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。