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

#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UIView *animationView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.animationView = [[UIView alloc] initWithFrame:CGRectMake(80, 150, self.view.frame.size.width - 160, 120)];
    self.animationView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:self.animationView];
    
    // 添加属性
    self.animationView.layer.masksToBounds = YES;// UIView 默认 YES
    self.animationView.layer.cornerRadius = 20;// 圆角
    self.animationView.layer.borderWidth = 5;  // 边框宽度（默认黑色）
    self.animationView.layer.borderColor = [UIColor yellowColor].CGColor;// 边框颜色
    self.animationView.layer.shadowOpacity = 1.0;// 阴影透明度（默认0）
    self.animationView.layer.shadowOffset = CGSizeMake(8, 8);// 阴影偏移量
    self.animationView.layer.shadowColor = [UIColor greenColor].CGColor;// 阴影颜色
    
    // 锚点：定义 layer层 矩形边界, 默认（0.5，0.5）
    NSLog(@"anchorPoint = %@",NSStringFromCGPoint(self.animationView.layer.anchorPoint)); // {0.5, 0.5}
    
    // position：当前的 layer 在其父 layer 层的坐标
    // self.view.frame.size.width = 414
    // 207 = 80 + (414-160)/2
    // 210 = 150 + 120/2
    NSLog(@"position = %@",NSStringFromCGPoint(self.animationView.layer.position));// {207, 210}
    
    //-------------- 测试一 ----------------
    // 改变 position：不影响锚点；视图位置发生改变
    self.animationView.layer.position = CGPointMake(160, 160);
    NSLog(@"重设 position 后的 anchorPoint = %@",NSStringFromCGPoint(self.animationView.layer.anchorPoint)); // {0.5, 0.5}
    
    //-------------- 测试二 ----------------
    // 改变锚点：同样不影响 position；视图位置发生改变
    self.animationView.layer.anchorPoint = CGPointMake(0.8, 0.8);
    NSLog(@"锚点改变后的 position = %@",NSStringFromCGPoint(self.animationView.layer.position));// 输出 {160, 160}
}

@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) 时