UI基础 - CALayer | 锚点、position、frame
▶ CALayer
1 - CALayer 包含在 QuartzCore 框架中，这是一个跨平台的框架，既可以用在 iOS 中又可以用在 Mac OS X 中
2 - CALayer 的设计主要是了为了内容展示和动画操作，它本身并不包含在 UIKit 中，它不能响应事件；它在设计之初就考虑它的动画操作功能，很多属性在修改时都能形成动画效果，这种属性称为隐式动画属性
3 - CALayer 常用属性
self.view.layer.cornerRadius // 圆角 self.view.layer.shadowColor // 阴影颜色 self.view.layer.shadowOffset // 阴影偏移距离 self.view.layer.shadowRadius // 阴影模糊程度 self.view.layer.shadowOpacity // 阴影透明程度 self.view.layer.borderWidth // 描边粗细 self.view.layer.borderColor // 描边颜色 self.view.layer.anchorPoint // 锚点 self.view.layer.position // 位置 self.view.layer.transform // CALayer 产生 3D空间 内的平移、缩放、旋转等变化
4 - CALayer 和 UIView 的区别：UIView 本质上是对 CALayer 的高级封装
5 - CALayer | 锚点
// - ViewController.m
1 #import "ViewController.h" 2 @interface ViewController () 3 @property(nonatomic,strong)UIView *animationView; 4 @end 5 6 @implementation ViewController 7 8 - (void)viewDidLoad { 9 [super viewDidLoad]; 10 11 self.animationView = [[UIView alloc] initWithFrame:CGRectMake(80, 150, self.view.frame.size.width - 160, 120)]; 12 self.animationView.backgroundColor = [UIColor cyanColor]; 13 [self.view addSubview:self.animationView]; 14 15 // 添加属性 16 self.animationView.layer.masksToBounds = YES;// UIView 默认 YES 17 self.animationView.layer.cornerRadius = 20;// 圆角 18 self.animationView.layer.borderWidth = 5; // 边框宽度（默认黑色） 19 self.animationView.layer.borderColor = [UIColor yellowColor].CGColor;// 边框颜色 20 self.animationView.layer.shadowOpacity = 1.0;// 阴影透明度（默认0） 21 self.animationView.layer.shadowOffset = CGSizeMake(8, 8);// 阴影偏移量 22 self.animationView.layer.shadowColor = [UIColor greenColor].CGColor;// 阴影颜色 23 24 // 锚点：定义 layer层 矩形边界, 默认（0.5，0.5） 25 NSLog(@"anchorPoint = %@",NSStringFromCGPoint(self.animationView.layer.anchorPoint)); // {0.5, 0.5} 26 27 // position：当前的 layer 在其父 layer 层的坐标 28 // self.view.frame.size.width = 414 29 // 207 = 80 + (414-160)/2 30 // 210 = 150 + 120/2 31 NSLog(@"position = %@",NSStringFromCGPoint(self.animationView.layer.position));// {207, 210} 32 33 //-------------- 测试一 ---------------- 34 // 改变 position：不影响锚点；视图位置发生改变 35 self.animationView.layer.position = CGPointMake(160, 160); 36 NSLog(@"重设 position 后的 anchorPoint = %@",NSStringFromCGPoint(self.animationView.layer.anchorPoint)); // {0.5, 0.5} 37 38 //-------------- 测试二 ---------------- 39 // 改变锚点：同样不影响 position；视图位置发生改变 40 self.animationView.layer.anchorPoint = CGPointMake(0.8, 0.8); 41 NSLog(@"锚点改变后的 position = %@",NSStringFromCGPoint(self.animationView.layer.position));// 输出 {160, 160} 42 } 43 44 @end
▶ 锚点 | postion | frame
1 - anchorpoint 可以看成是中心点；而 position 是中心点的坐标
2 - 三者之间的联系
A. 锚点改变：position不变；frame改变
frame.origin.x = - anchorPoint.x * bounds.size.width + position.x；
frame.origin.y = - anchorPoint.y * bounds.size.height + position.y；
为什么改变 archorpoint 的值会改变 frame 的位置 ？
因为 calayer 中的 position 的位置是不变的，当你改变 anchorpoint 时，系统为了适配 position 的位置，就只能去修改 frame 的值去达到目的
B. position改变：锚点不变；frame改变
frame.origin.x = position.x - anchorPoint.x * bounds.size.width；
frame.origin.y = position.y - anchorPoint.y * bounds.size.height；
C. frame改变：锚点不变；position改变
position.x = frame.origin.x + anchorPoint.x * bounds.size.width；
position.y = frame.origin.y + anchorPoint.y * bounds.size.height；
3 - 锚点 对 frame 的影响效果如下
当 anchorpoint.x 的值小于 0.5 时，那么 frame.origin.x 的值就会增大，图片的效果就会向右平移
当 anchorpoint.x 的值大于 0.5 时，那么 frame.origin.x 的值就会减小，图片的效果就会向左平移
当 anchorpoint.y 的值小于 0.5 时，那么 frame.origin.y 的值就会增大，图片的效果就会向下平移
当 anchorpoint.y 的值大于 0.5 时，那么 frame.origin.y 的值就会减小，图片的效果就会向上平移
4 - 示例图：红色视图的 frame初始值是 { {50, 50}, {50, 50} }
A. 锚点默认值为 (0.5, 0.5) 时
B. 锚点取值为 (0, 0) 时
C. 锚点默认取值为 (1, 1) 时
D. 锚点默认取值为 (1, 0.5) 时
