iOS：CALayer（17-12-06更）

目录

　　1、CALayer（父类）

　　2、CAShapeLayer（形状/画布）

　　3、CAEmitterLayer（粒子发射层）

　　4、CAGradientLayer（渐变层）

　　5、CATransformLayer（3D变换容器层）

　　6、CAReplicatorLayer（重复图层）

　　N、CATextLayer（文字绘制，不学...）

顺序为 接触/学习 顺序

1、CALayer（父类）

　　1）、几个常用属性

    CALayer *layer = [[CALayer alloc]init];
    // 一般layer尺寸设置，为 bounds = {0， 0， width， height}; position = {centerX, centery};frame 为虚拟、计算出来的。
    layer.bounds
    // 锚点的位置，默认中心，等同于View的center。如果锚点 anchorPoint 有修改过，比如anchorPoint = {0，0} ，则position = {x, y};
    layer.position
    // 锚点,旋转、位置相关，默认(0.5, 0.5)。范围(0, 0) <-> (1, 1)
    layer.anchorPoint
    
    
    // 寄宿图
    layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"0"].CGImage);
    // 内容显示方式，对齐、自适应、不超出边界、拉伸
    layer.contentsGravity = kCAGravityResizeAspectFill;
    // 设置某个区域会被拉伸变化，大小均为0至1，{0.25, 0.25, 0.5, 0.5}
    layer.contentsCenter
    // 设置寄宿图缩放，防止在Retina屏出错
    layer.contentsScale = [UIScreen mainScreen].scale;
    // 拼合图片，大小均为0至1，{0, 0, 0.5, 0.5}，如红白机，单独改变一个图片块，而不是移动图片
    layer.contentsRect
    // 图片拉伸过滤，线性过滤保留形状，最近过滤则保留像素的差异
    // 对于比较小的图或者是差异特别明显，极少斜线的大图用kCAFilterNearest，如数码管显示时钟
    // 很多斜线或是曲线轮廓的图片,用kCAFilterLinear  、 kCAFilterTrilinear
    layer.magnificationFilter
    
    //变换
    layer.transform
    //圆角、边框、透明、阴影相关
    layer.masksToBounds
    layer.cornerRadius
    layer.borderWidth
    layer.borderColor
    layer.opacity
    layer.shadowColor
    layer.shadowOpacity
    layer.shadowOffset
    layer.shadowRadius
    layer.shadowPath
    
    // 呈现图层，可以判断动画时的位置（首次显示在屏幕上之后，才有值，否则返回nil）
    layer.presentationLayer
    // 在呈现图层上调用modelLayer，返回所依赖的CALayer，通常返回self
    layer.modelLayer
    // 可以垂直翻转，比如画坐标系。
    layer.geometryFlipped

    // Z轴，透视效果。3D变换,如旋转会很明显
    layer.zPosition
    layer.anchorPointZ
    
    // 同View
    layer.frame
    layer.hidden
    layer.superlayer
    layer.sublayers
    layer.backgroundColor

　　2）、几个方法

// 子类重写，设置默认属性
+ (nullable id)defaultValueForKey:(NSString *)key
{
    if ([key isEqualToString:@"backgroundColor"])
    {
        return (id)[UIColor orangeColor].CGColor;
    }
    return [super defaultValueForKey:key];
}

// 添加动画
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

//
- (void)display;
- (void)setNeedsDisplay;
- (void)setNeedsDisplayInRect:(CGRect)r;
- (BOOL)needsDisplay;
- (void)displayIfNeeded;

//
- (void)setNeedsLayout;
- (BOOL)needsLayout;
- (void)layoutIfNeeded;
- (void)layoutSublayers;

  　　3）、类似View

// 内容（图片）的缩放
layer.contentGravity
view.contentMode

// 超出剪裁
layer.maskToBounds
view.clipsToBounds

// 图片指定区域拉伸（聊天气泡）
layer.contentsCenter
view.resizableImageWithCapInsets

// 层级结构
- (void)removeFromSuperlayer;
- (void)addSublayer:(CALayer *)layer;
- (void)insertSublayer:(CALayer *)layer atIndex:(unsigned)idx;
- (void)insertSublayer:(CALayer *)layer below:(nullable CALayer *)sibling;
- (void)insertSublayer:(CALayer *)layer above:(nullable CALayer *)sibling;
- (void)replaceSublayer:(CALayer *)layer with:(CALayer *)layer2;

 

2、CAShapeLayer

　　1）、使用参照 《iOS：绘图》 -> “1、UIBezierPath（贝塞尔曲线）” -> “2）、” 。

　　2）、切任意圆角、任意形状。使用参照 《iOS：绘图》 -> “1、UIBezierPath（贝塞尔曲线）” -> “3）、” 。

　　3）、截取中空的形状，做彩色进度圆圈。使用参照 《iOS：绘图》 -> “1、UIBezierPath（贝塞尔曲线）” -> “4）、彩色的动画加载圆” 。

　　4）、优点：

　　　　1）、渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。

　　　　2）、高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。

　　　　3）、不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。

　　　　4）、不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

3、CAEmitterLayer（粒子发射层）

　　1）、使用参照 《iOS：动画》 -> “N、粒子动画” -> “1）、创建粒子发射层” 。

4、CAGradientLayer（渐变层）

　　属性、方法不多，用例子吧，可直接复制使用。

　　1）、透明度（示例）

    //创建
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    //渐变点
    UIColor *colorTop = [[UIColor alloc]initWithRed:0.0 green:0.0 blue:0.0 alpha:1];
    UIColor *colorButtom = [[UIColor alloc]initWithRed:0.0 green:0.0 blue:0.0 alpha:0];
    gradientLayer.colors = @[ (__bridge id)colorTop.CGColor, (__bridge id)colorButtom.CGColor];
    // 渐变点位置（个数对应colors个数，没对应也没事，只是有点奇怪），点与点的距离越小，变化越快
//    gradientLayer.locations = @[@0.0,@1.0];
    // 变化类型，线性变化（只有这个宏，不设也没事）
//    gradientLayer.type = kCAGradientLayerAxial;
    //渐变方向 x：0->1 左到右，反之则反。同理，y：0->1 上到下，反之则反。(0.0)->(1.1)屏幕左上到右下斜着变化
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1.0);
    //大小，如果小于bounds，应该还要设置 position 。
    gradientLayer.frame = self.bounds;
    //添加
    [self.layer addSublayer:gradientLayer];

　　补充：colorTop 可直接 = [UIColor blackColor];

　　　　　colorButtom 可直接 = [UIColor clearColor]; 

　　2）、可通过shapeLayer来设置自身的mask，设置彩色圆环形加载条。

　　　　使用参照 《iOS：绘图》 -> “1、UIBezierPath（贝塞尔曲线）” -> “4）、彩色的动画加载圆” 。

5、CATransformLayer（3D变换容器层）

　　1）、特性是容器，用来包含子layer做3D变换。容器没有内容，所以设置背景颜色等，会失效。

　　2）、子layer的z轴point、z轴3D位移，在被包含在CATransformLayer才有效果。（在普通view、layer被扁平化在父视图上）

　　3）、一般用这个3D变换容器，基本都涉及到旋转。所以初始化时设置m34，必不可少。灭点。

CATransform3D t = CATransform3DIdentity;
t.m34 = 1.0/-500;
transformLayer.transform = t;

　　4）、变换，参照《iOS：动画》 -> “1、UIView Animation” -> “1-3、CATransform3D（缩放、位移、旋转。三维变换）” 。 例：

CATransform3D t = transformLayer.transform;
t = CATransform3DRotate(t, kRADIANS_FROM_DEGREES(15), 0, 1, 0);
transformLayer.transform = t;

 　　5）、因为是用CATransformLayer容器做3D变换，所以子layer，依然绕CATransformLayer的position（anchorPoint）3D变换。

　　　　其余3D变换特性，参照《iOS：动画》 -> “1、UIView Animation” -> “1-3、CATransform3D（缩放、位移、旋转。三维变换）”

　　

 6、CAReplicatorLayer（重复图层）

　　属性、方法不多，用例子吧，可直接复制使用。

　　1）、重复的颜色渐变图层（示例）

    // 创建contentView
    UIView *contentView = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 300, 300)];
    contentView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:contentView];
    
    //============ CAReplicatorLayer Begin============
    
    // 添加重复图层，尺寸同contentView
    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = contentView.bounds;
    [contentView.layer addSublayer:replicator];
    
    // 重复10次
    replicator.instanceCount = 10;
    
	// 变换。会在上一次的图层，再变化（颜色、位移、旋转等等）
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DTranslate(transform, 0, 50, 0);
//    transform = CATransform3DRotate(transform, M_PI/5, 0, 0, 1);
    replicator.instanceTransform = transform;
    
    // 在上一次的图层颜色通道再-0.1
    replicator.instanceBlueOffset = -0.1;
    replicator.instanceGreenOffset = -0.1;
    
    //============ CAReplicatorLayer End============
    
    // 添加内容到重复的图层上。
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(150.0f-25.0, 0.0f, 50.0f, 50.0f);
    layer.backgroundColor = [UIColor whiteColor].CGColor;
    [replicator addSublayer:layer];

　　2）、重复的倒影图层（示例）

// 要倒影的图片尺寸
#define IMAGEVIEW_HEIGHT    171.5
#define IMAGEVIEW_WIDTH     242

    // 创建contentView（包含原图片+倒影的高度），高再+2为图片与倒影的间隙
    UIView *contentView = [[UIView alloc]initWithFrame:CGRectMake(50 , 50, IMAGEVIEW_WIDTH, IMAGEVIEW_HEIGHT*2 + 2)];
    [self.view addSubview:contentView];
    
    //============ CAReplicatorLayer Begin============
    
    // 添加重复图层
    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = contentView.bounds;
    [contentView.layer addSublayer:replicator];
    
    // 重复2次
    replicator.instanceCount = 2;
    
    // 变换，会在上一次的图层，再变化（颜色、位移、旋转等等）
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, M_PI, 1, 0, 0);
    replicator.instanceTransform = transform;
    
    // 在上一次的图层透明通道再-0.6
    replicator.instanceAlphaOffset = -0.6;
    
    //============ CAReplicatorLayer End============
    
    // 添加内容到重复的图层上。
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, IMAGEVIEW_WIDTH, IMAGEVIEW_HEIGHT);
    layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"123"].CGImage);
    [replicator addSublayer:layer];

    // 渐变层蒙版
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[ (__bridge id)[UIColor blackColor].CGColor,(__bridge id)[UIColor clearColor].CGColor];
    // 渐变点控制，contentView的0-0.5为不透明，0.5-0.8为渐透明，0.8-1.0为透明
    gradientLayer.locations = @[@0.5,@0.8];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1.0);
    gradientLayer.frame = contentView.bounds;
    contentView.layer.mask = gradientLayer;