CALayer

概念

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView,其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层

在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer;

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示,换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

基本属性

宽度和高度@propertyCGRectbounds;位置(默认指中点，具体由anchorPoint决定)@propertyCGPointposition;锚点(x,y的范围都是0-1)，决定了position的含义@propertyCGPointanchorPoint;背景颜色(CGColorRef类型)@propertyCGColorRefbackgroundColor;形变属性@propertyCATransform3Dtransform;边框颜色(CGColorRef类型)@propertyCGColorRefborderColor;边框宽度@propertyCGFloatborderWidth;圆角半径@propertyCGColorRefborderColor;内容(比如设置为图片CGImageRef)@property(retain)idcontents;

基本使用

通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如： 阴影 圆角大小 边框宽度和颜色 … …

还可以给图层添加动画，来实现一些比较炫酷的效果

1操作layer改变UIView外观.1.1设置阴影        默认图层是有阴影的, 只不过,是透明的self.RedView.layer.shadowOpacity=1;        设置阴影的圆角self.RedView.layer.shadowRadius=10;        设置阴影的颜色,把UIKit转换成CoreGraphics框架,用.CG开头self.RedView.layer.shadowColor= [UIColorblueColor].CGColor;1.2.设置边框        设置图层边框,在图层中使用CoreGraphics的CGColorRefself.RedView.layer.borderColor= [UIColorwhiteColor].CGColor;self.RedView.layer.borderWidth=2;1.3.设置圆角        图层的圆角半径,圆角半径为宽度的一半, 就是一个圆self.RedView.layer.cornerRadius=50;2.操作layer改变UIImageView的外观.2.1设置图形边框self.imageView.layer.borderWidth=2;self.imageView.layer.borderColor= [UIColorwhiteColor].CGColor;2.2设置图片的圆角半径self.imageView.layer.cornerRadius=50;        裁剪,超出裁剪区域的部分全部裁剪掉self.imageView.layer.masksToBounds=YES;        注意:UIImageView当中Image并不是直接添加在层上面的.这是添加在layer当中的contents里.        我们设置层的所有属性它只作用在层上面.对contents里面的东西并不起作用.所以我们看不到图片有圆角的效果.        想要让图片有圆角的效果.可以把masksToBounds这个属性设为YES,        当设为YES,把就会把超过根层以外的东西都给裁剪掉.3.layer的CATransform3D属性.      只有旋转的时候才可以看出3D的效果.      旋转      x,y,z 分别代表x,y,z轴.CATransform3DMakeRotation(M_PI,1,0,0);      平移CATransform3DMakeTranslation(x,y,z)      缩放CATransform3DMakeScale(x,y,z);      可以通过KVC的方式进行设置属性.      但是CATransform3DMakeRotation它的值,是一个结构体, 所以要把结构转成对象.NSValue*value = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI,1,0,0)];      [_imageView.layersetValue:value forKeyPath:@"transform.scale"];      什么时候用KVC?      当需要做一些快速缩放,平移,二维的旋转时用KVC.      比如: [_imageView.layersetValue:@0.5forKeyPath:@"transform.scale"];      快速的进行缩放.      后面forKeyPath属性值不是乱写的.苹果文档当中给了相关的属性.

UIKit -> CG

首先要知道：CALayer是定义在QuartzCore框架中的；CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的；UIColor、UIImage是定义在UIKit框架中的

其次，QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用，但是UIKit只能在iOS中使用

因此，为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

不过很多情况下，可以通过UIKit对象的特定方法，得到CoreGraphics对象，比如UIImage的CGImage方法可以返回一个CGImageRef

自定义CAlayer

1.如何自定义Layer.    自定义CALayer的方式创建UIView的方式非常相似.CALayer*layer = [CALayerlayer];    layer.frame=CGRectMake(50,50,100,100);    layer.backgroundColor= [UIColorredColor].CGColor;    [self.view.layeraddSublayer:layer];    给layer设置图片.    layer.contents= (id)[UIImageimageNamed:@"阿狸头像"].CGImage;

UIView和CALayer的选择

通过CALayer，就能做出跟UIImageView一样的界面效果

对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以.所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以,当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级

UIView可以通过subviews属性访问所有的子视图，类似地，CALayer也可以通过sublayers属性访问所有的子层

UIView可以通过superview属性访问父视图，类似地，CALayer也可以通过superlayer属性访问父层

下面再看一张UIView和CALayer的关系图：

如果两个UIView是父子关系，那么它们内部的CALayer也是父子关系。

position和anchorPoint

@propertyCGPointposition;用来设置CALayer在父层中的位置以父层的左上角为原点(0,0)@propertyCGPointanchorPoint;称为“定位点”、“锚点”决定着CALayer身上的哪个点会在position属性所指的位置以自己的左上角为原点(0,0)它的x、y取值范围都是0~1，默认值为（0.5,0.5）

如图

隐式动画

根层:UIView内部自动关联着的那个layer我们称它是根层.

非根层:自己手动创建的层,称为非根层.

隐式动画就是当对非根层的部分属性进行修改时,它会自动的产生一些动画的效果.我们称这个默认产生的动画为隐式动画.

如何取消隐式动画 首先要了解动画底层是怎么做的.动画的底层是包装成一个事务(很多操作绑定在一起,当这些操作执行完毕后,才去执行下一个操作.)来进行的.

开启事务    [CATransactionbegin];    设置事务没有动画    [CATransactionsetDisableActions:YES];    设置动画执行的时长    [CATransactionsetAnimationDuration:2];    提交事务    [CATransactioncommit];

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）

所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画

隐式动画是指当对非RootLayer的部分属性进行修改时，默认会自动产生一些动画效果而这些属性称为Animatable,Properties(可动画属性)

列举几个常见的Animatable Properties：

1->bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画

2->backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画

3->position：用于设置CALayer的位置。修改这个属性会产生平移动画

时钟效果

1.搭建界面.        分析界面.        界面上时针,分针,秒针不需要与用户进行交互.所以都可以使用layer方式来做.        做之前要观察时针在做什么效果.        是根据当前的时间,绕着表盘的中心点进行旋转.        要了解一个非常重要的知识点.无论是旋转,缩放它都是绕着锚点.进行的.        要想让时针,分针,称针显示的中间,还要绕着中心点进行旋转.        那就要设置它的position和anchorPoint两个属性.        创建秒针CALayer*layer = [CALayerlayer];        _secLayer = layer;        layer.bounds=CGRectMake(0,0,1,80);        layer.anchorPoint=CGPointMake(0.5,1);        layer.position=CGPointMake(_clockView.bounds.size.width*0.5,    _clockView.bounds.size.height*0.5);        layer.backgroundColor= [UIColorredColor].CGColor;        [_clockView.layeraddSublayer:layer];2.让秒针开始旋转.        让秒针旋转.所以要计算当前的旋转度是多少?        当前的旋转角度为:当前的时间 * 每秒旋转多少度.        计算每一秒旋转多少度.60秒转一圈360度360除以60就是每一秒转多少度.每秒转6度.        获取当前的时间        创建日历类NSCalendar*calendar = [NSCalendarcurrentCalendar];        把日历类转换成一个日期组件        日期组件(年,月,日,时,分,秒)        component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒        fromDate:当前的日期NSDateComponents*cmp = [calendar components:NSCalendarUnitSecondfromDate:[NSDatedate]];        我们的秒就是保存在日期组件里面,它里面提供了很多get方法.NSIntegersecond = cmp.second;        那么当前秒针旋转的角度就是        当前的秒数乘以每秒转多少度.        second * perSecA        还得要把角度转换成弧度.        因为下面分针,时针也得要用到, 就把它抽出一个速参数的宏.#define angle2Rad(angle) ((angle) / 180.0 * M_PI)让它每隔一秒旋转一次.所以添加一个定时器.        每个一秒就调用,旋转秒针        - (void)timeChange{        获取当前的秒数        创建日历类NSCalendar*calendar = [NSCalendarcurrentCalendar];        把日历类转换成一个日期组件        日期组件(年,月,日,时,分,秒)        component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒        fromDate:当前的日期NSDateComponents*cmp = [calendar components:NSCalendarUnitSecondfromDate:[NSDatedate]];        我们的秒就是保存在日期组件里面,它里面提供了很多get方法.NSIntegersecond = cmp.second;        秒针旋转多少度.CGFloatangel = angle2Rad(second * perSecA);        旋转秒针self.secondL.transform=CATransform3DMakeRotation(angel,0,0,1);        }        运行发现他会一下只就调到某一个时间才开始旋转        一开始的时候就要来到这个方法,获取当前的秒数把它定位好.        要在添加定时器之后就调用一次timeChange方法.3.添加分针        快速拷贝一下,然后添加一个分针成员属性.        修改宽度,修改颜色        也得要让它旋转,        要算出每分钟转多少度        转60分钟刚好是一圈        所以每一分钟也是转6度.        获取当前多少分?        同样是在日期组件里面获得        里面有左移符号,右移符号.他就可以用一个并运算        现在同时让他支持秒数和分 后面直接加上一个 |NSDateComponents*cmp = [calendar components:NSCalendarUnitSecond|NSCalendarUnitMinutefromDate:[NSDatedate]];CGFloatminueteAngel = angle2Rad(minute * perMinuteA);self.minueL.transform=CATransform3DMakeRotation(minueteAngel,0,0,1);4.添加时针          同样复制之前的,添加一个小时属性        小时转多少度        当前是多少小时,再计算先每一小时转多少度.12个小时转一圈.360除以12,每小时转30度        时针旋转多少度CGFloathourAngel = angle2Rad(hour * perHourA);        旋转时针self.hourL.transform=CATransform3DMakeRotation(hourAngel,0,0,1);        直接这样写会有问题        就是没转一分钟,小时也会移动一点点        接下来要算出,每一分钟,小时要转多少度60分钟一小时.一小时转30度.30除以60,就是每一分钟,时针转多少度.0.5时针旋转多少度CGFloathourAngel = angle2Rad(hour * perHourA + minute * perMinuteHourA);        旋转时针self.hourL.transform=CATransform3DMakeRotation(hourAngel,0,0,1);