CALayer的简单使用

图片来自500px

文 || 張贺

• 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView
• 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
• 在创建UIView对象时，UIView内部会自动创建一个图层（即CALayer对象），通过UIView的layer属性可以访问这个层
  @property(nonatomic,readonly,strong) CALayer *layer; // returns view's layer. Will always return a non-nil value. view is layer's delegate
• 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
• 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

---

CALayer的基本使用

• 通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：
• 阴影
• 圆角大小
• 边框宽度和颜色
• ... ...
• 还可以给图层添加动画，来实现一些比较炫酷的效果

阴影

• shadowOffset（阴影的偏移量），默认是(0, -3)。
  /* The shadow offset. Defaults to (0, -3). Animatable. */
  @property CGSize shadowOffset;
  所以UIView自带阴影效果，但为什么看不见呢？是因为他的另外一个属性

• shadowOpacity（阴影的不透明度）默认为0，也就是说自带的(0, -3)的偏移量是透明的
  /* The opacity of the shadow. Defaults to 0. Specifying a value outside the
  * [0,1] range will give undefined results. Animatable. */
  @property float shadowOpacity;
  想要看见这(0, -3)的偏移量只需要把shadowOpacity设置为1
  self.purpleView.layer.shadowOpacity = 1;

  
  自带的(0, -3)的偏移量
  

  也可以自己设置偏移量
  self.purpleView.layer.shadowOffset = CGSizeMake(20, 10);

自己设置阴影偏移量

• shadowColor（阴影的颜色）

  /* The color of the shadow. Defaults to opaque black. Colors created
  * from patterns are currently NOT supported. Animatable. */
  @property(nullable) CGColorRef shadowColor;
  

这里要转成CGColor？

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

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

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

     self.purpleView.layer.shadowColor = [UIColor orangeColor].CGColor;
  

• shadowRadius（阴影的模糊程度）

  /* The blur radius used to create the shadow. Defaults to 3. Animatable. */
  @property CGFloat shadowRadius;
  

边框

• borderWidth（边框宽度）
  /* The width of the layer's border, inset from the layer bounds. The
  * border is composited above the layer's content and sublayers and
  * includes the effects of the `cornerRadius' property. Defaults to
  * zero. Animatable. */

  @property CGFloat borderWidth;
  

• borderColor（边框的颜色）
  /* The color of the layer's border. Defaults to opaque black. Colors
  * created from tiled patterns are supported. Animatable. */

  @property(nullable) CGColorRef borderColor;
  

这里的颜色也要装换成CGColor

  self.purpleView.layer.borderWidth = 2;
  self.purpleView.layer.borderColor = [UIColor orangeColor].CGColor;

圆角

• cornerRadius（圆角）
  /* When positive, the background of the layer will be drawn with
  * rounded corners. Also effects the mask generated by the
  * `masksToBounds' property. Defaults to zero. Animatable. */

  @property CGFloat cornerRadius;
  

注意：设置图片圆角的时候要设置masksToBounds =YES这是因为我们设置的所有layer属性之作用在根层上layer.contents只要设置了layer.masksToBounds =YES超出根层之外的部分会被裁掉。

3D

• transform
  利用layer的transform属性可以做一些3D动画
  UIView的transform属性是CGAffineTransform类型的，而layer的transform属性是CATransform3D类型的

CATransform3D类型 CGAffineTransform类型

//平移
self.purpleView.layer.transform = CATransform3DMakeTranslation(100, 0, 0);
//旋转
self.purpleView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
//缩放
self.purpleView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 0);

当做一些快速缩放、平移、二维旋转的时候建议使用KVC

[self.purpleView.layer setValue:@(9) forKeyPath:@"transform.scale"];

可用的keyPath

可用的keyPath

UIView和CALayer的选择

通过CALayer，就能做出跟UIImageView一样的界面效果
既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？

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

position和anchorPoint

• CALayer有2个非常重要的属性：position和anchorPoint

  /* The position in the superlayer that the anchor point of the layer's
  * bounds rect is aligned to. Defaults to the zero point. Animatable. */
  
  //用来设置CALayer在父层中的位置
  //以父层的左上角为原点(0, 0)
  @property CGPoint position;
  
  /* Defines the anchor point of the layer's bounds rect, as a point in
  * normalized layer coordinates - '(0, 0)' is the bottom left corner of
  * the bounds rect, '(1, 1)' is the top right corner. Defaults to
  * '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */
  
  //称为“定位点”、“锚点”
  //决定着CALayer身上的哪个点会在position属性所指的位置
  //以自己的左上角为原点(0, 0)
  //它的x、y取值范围都是0~1，默认值为（0.5, 0.5）
  @property CGPoint anchorPoint;
  

隐式动画

• 每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
• 所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画

什么是隐式动画？

• 当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
  而这些属性称为Animatable Properties(可动画属性)

• 列举几个常见的Animatable Properties：
  bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
  backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
  position：用于设置CALayer的位置。修改这个属性会产生平移动画

  
  Animatable Properties

  - (void)viewDidLoad {
  [super viewDidLoad];
  
  CALayer *layer = [CALayer layer];
  layer.position = CGPointMake(100, 100);
  layer.bounds = CGRectMake(0, 0, 100, 100);
  layer.backgroundColor = [UIColor redColor].CGColor;
  self.layer = layer;
  [self.view.layer addSublayer:layer];
  
  }
  
  - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  
  /*想要关闭隐式动画,首先要了解核心动画的原理
  任何动画,它都会封装到一个事务里面.学数据库都应该了解事务的吧.
  什么叫事务, 把很多操作绑定在一起, 必须这些操作中的每一项全部完成,它才能做一些事件.
  就是说,你一个动画全部执行完之后,它才能执行一些事件.
  
  动画的底层都是包装到一个事务里面.
  */
  //开启一个事务
  [CATransaction begin];
  //不需要隐式动画
  //[CATransaction setDisableActions:YES];
  //随机改变位置
  self.layer.position = CGPointMake(arc4random_uniform(400), arc4random_uniform(400));
  //随机改变大小
  self.layer.bounds = CGRectMake(0, 0, arc4random_uniform(200), arc4random_uniform(200));
  //随机改变圆角
  self.layer.cornerRadius = arc4random_uniform(50);
  //随机改变颜色
  self.layer.backgroundColor = [self randomColor].CGColor;
  
  [CATransaction commit];
  //还可以设置隐式动画执行的时长
  [CATransaction  setAnimationDuration:3.0];
  
  /*
   总结:
  1.只有非根层才有隐式动画
  2.只要一个属性有Animatable属性,它就会有隐式动画
   */
  
  }
  #pragma mark 返回随机颜色
  - (UIColor *)randomColor{
  
  CGFloat r = arc4random_uniform(256) / 255.0;
  CGFloat g = arc4random_uniform(256) / 255.0;
  CGFloat b = arc4random_uniform(256) / 255.0;
  
  return [UIColor colorWithRed:r green:g blue:b alpha:1];
  
  }
  

隐式动画.gif