图片来自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、CGImageRefself.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
网友评论