iOS CALayer视图图层

在iOS中都会牵扯到图形转换，动画效果，添加视图，等等的一系列问题，在设计页面，设计图形，添加动画的时候都会使用到这个知识。

简单的说他就是视图的图层，但又不是视图，因为视图可以和用户交互，添加响应事件，添加视图等等，但是CALayer并不可以添加响应事件等等，它只是一个视图的图层，就是这个图片的显示层，展示层，只能够显示内容，比如展示背景颜色，展示图片，设置边框，等等。

UIView上面的rootLayer 发生改变的话 子图层也会发生变化

如果想要改变 button的视图形状边框等，要改变的不止有一个视图 改变的只是其中一个视图的rootLayer 它会显示出显示未被裁切的边框

rootLayer上面没有动画效果

CALayer发生改变 子图层不会跟随发生改变 自带动画效果(当改变属性值的时候) 隐式动画

理解了CALayer之后就可以大致的有一个了解，有个要使用的方向，而且单独对图层做设计修改的时候功能也会比以前多很多，而且当你改变他的图层数值的时候，CALayer是自带隐式动画效果的

接下来看一个图来大概了解下视图的图层关系，下面是我某一个页面的3D图，不得不说Xcode的强大



在左边我们可以详细看到他们的图层是怎么样嵌套的，当你选中一个图层的时候你也可以在上面看到他的所有父视图，或者说在他之前有几层图层，分别是什么，当你对一个视图进行处理的时候，打算处理他的哪一个图层，都很重要。

如果你只处理了一层，比如我为了美观，我想把上图collectionView上面的cell设置了这个属性

cell.layer.cornerRadius = 10;

他就会有一点圆边，让用户感觉上至少比方方正正的好看很多，但是我cell上面还有一层imageView和label，他们都在contentView上面，在这两个属性都为空的时候，cell没有问题，但一旦我设置了图片，而且是填满状态的，显示图片是没有问题，但是你会发现这个cell他又变成方方正正的了，这难免会让人很烦躁，有时候确实会因为各种原因头疼，甚至因此卡住，或者放弃这个效果，白白浪费了一段时间。

感觉有点像打广告的。。所以你要设置的时候要清楚的知道自己要对哪一个图层进行处理，在这里我们只要再给他的ImageView层处理一下layer就可以了

cell.imageView.layer.cornerRadius = 10;
//裁切内容的尺寸
cell.imageView.layer.masksToBounds = YES;

接下来说一下图层的一些属性，可修改的一些属性

bounds 边境范围

position 中心点

zPosition z轴中心点

anchorPoint 锚点 ✮✮✮✮✮

锚点 默认锚点是与中心店重合 锚点的最小值是0，0最大值1，1 默认值是0.5，0.5

当视图 改变的时候 是以锚点为基准去改变

锚点的值与位置

anchorPointZ Z轴锚点

transform 转换形态

frame NO. Animatable 坐标

hidden 隐藏

doubleSided 图层背面是否显示

geometryFlipped 翻转 颠倒

masksToBounds 裁切边境

contents 内容

opaque 不透明度

allowsEdgeAntialiasing 是否使用 变形后的抗锯齿

backgroundColor 背景颜色

borderWidth 边框宽

borderColor 边框颜色

opacity 不透明度

shadowColor 阴影颜色

shadowOpacity 阴影不透明度

rasterizationScale 防止Retina屏幕像素化

shadowOffset 阴影偏移量

shadowRadius 阴影的半径

通过设置这些属性都可以让视图的形态等发生改变，要注意在给CALayer一些属性赋值的时候，他需要的值得类型都是一些特殊类型的值

比如我们之前在给View的transform赋值的时候使用的都是CGAffineTransform类型的，而给CALayer的transform赋值的时候使用使用的是CATransform3D类型的值，包括改变背景颜色也是使用的CGColor，图片是CGImageRef所以使用的时候要注意。

在给他们修改属性的时候，因为CALayer自带隐式动画，所以在触发事件等改变他的属性的时候都会自带动画效果。

在下面要具体说一下CALayer里面的锚点属性，也是动画，视图效果使用最重要的一个属性

大家如果有用过UIView的一些animation的基础动画的时候可能会知道，没用过也没关系，你肯定知道移动视图都是调整视图的center值来做到使视图移动到另外一个位置，设置bounds来放大或缩小一个视图。这里我们不重点说这个。

在这里锚点和视图的center值有点类似，也是通过知道他的中心点，来设置这个中心点，来改变他的位置，不过在这里我们不用中心点了，用的就是锚点来替代了这个点，他可以让视图以任意点为挪动点，比如，一个长长的汽车在行驶，汽车上面的人的位置都是固定不变的，你可以通过改变汽车的中心点来让汽车移动，也可以通过某一个人的位置的改变来改变汽车的位置，比如我现在想让这个汽车通过一个山洞



比如星星是司机，在这里我可以通过这个司机的位置，把司机的X增加一定的数值来让这个车通过这个山洞，和通过改变中心点是一个道理，只不过是这个中心点变了，变成了我们定义的一个锚点。也可以理解成把牛栓在树上，他怎么跑也跑不出这个点，以这个点为移动点来做动作。

理解了这个点的含义，就能做很多事情，比如有些动画就是通过固定锚点来让视图做一些动作



原谅我做不出动图T T，没有美工，在这里我设置图片的旋转就是让他转动半个圆，但是我把它的锚点设置成了他的右下角，所以他会以右下角来转动。

我们简单的写一个实例的layer

我们把CALayer定义成一个全局变量

{
CALayer *layer;

}

layer = [CALayer layer];
layer.frame = CGRectMake(0, 0, 100, 100);
layer.backgroundColor = [UIColor colorWithRed:1.000 green:0.607 blue:0.468 alpha:1.000].CGColor;
//在这里注意我们要添加的是一个layer所以要把它添加到我们要修改视图的layer上面
[self.view.layer addSublayer:layer];

然后我们写一个touchBegan的方法

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGFloat width = CGRectGetWidth(layer.bounds)!=100?100:25;
layer.bounds = CGRectMake(0, 0, width, width);

layer.cornerRadius = layer.cornerRadius !=50 ? 50:0;
layer.position = [touch locationInView:self.view];
}

在这里我们也简单写一个锚点的使用，我们继续定义一个CALayer

@property (nonatomic,strong)CALayer *pointLayer;
self.pointLayer.anchorPoint = CGPointMake(0.5 , 0.9);
self.pointLayer.contents = (id)[UIImage
4000
imageNamed:@"要旋转的图片"].CGImage;

- (CALayer *)pointLayer{
if (_pointLayer) {
return _pointLayer;
}
_pointLayer = [CALayer layer];
[self.view.layer addSublayer:_pointLayer];
_pointLayer.bounds = CGRectMake(0, 0, 20, 160);
_pointLayer.position = self.view.center;

return _pointLayer;
}

我们这个图片是一个宽20，高160的图片，我还是放一个图吧，免得被骂。。



嗯。。大概就是这个形状，好的，锚点是以图层的比例来定义的，我定义的是X轴比例0.5，Y比例0.9，也就是说，这个点大概在X是一半，Y是0.9，就是把这个图从上到下分成10份，他在第9份那个位置，大概在如图位置，咳咳。。然后，我们让他来进行一个旋转，正常的旋转应该都是以中心点来旋转，大概画面就像孙悟空耍金箍棒一样，以中心来旋转

我们来设置一个方法通过定时器来调用它

- (void)start{
//    NSCalendar日历的一个类，可以通过它获得年月日  时分秒
//    NSCalendar
//    NSDateComponents  组件    fromDate  获得哪个日期的组件
NSCalendar *calendar = [NSCalendar currentCalendar];
//    @property NSInteger hour;
//    @property NSInteger minute;
//    @property NSInteger second;
NSDateComponents *components = [calendar components:NSCalendarUnitHour|NSCalendarUnitMinute|NSCalendarUnitSecond fromDate:[NSDate date]];

float s = components.second * 6;
//在layer上面添加transform使用的都是CATransform3D
//X  Y  Z是设置绕哪个轴来旋转的   第一个值是旋转的角度
self.pointLayer.transform = CATransform3DMakeRotation(s, 0, 0, 1);
}

然后我们在viewDidLoad添加一个定时器

[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(start) userInfo:nil repeats:YES];

现在他就可以绕点来进行旋转了

具体每个属性都可以自己试一下他的效果，然后发一个有助于理解锚点的demo

锚点demo

最后说一下iOS的核心动画也是通过这个图层来实现的，下次把链接贴上

再贴上一个图层效果的一些处理处理图层特效

我的简书地址