Layer学习笔记

最新推荐文章于 2023-09-06 09:21:31 发布

原创最新推荐文章于 2023-09-06 09:21:31 发布 · 812 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

58 篇文章

订阅专栏

1.
学习技巧：
关于自定义图层

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //创建个图层
    CALayer *layer = [CALayer layer];
    //设置图层尺寸
    layer.bounds = CGRectMake(0, 0, 200, 200);
    //设置图层位置
    layer.position = CGPointMake(100, 100);
    //设置图层颜色
    layer.backgroundColor = [UIColor redColor].CGColor;
    //加到View成为主图层
    [self.view.layer addSublayer:layer];
}

效果图如下：
这里写图片描述

如果新增内容进layer图层：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //创建个图层
    CALayer *layer = [CALayer layer];
    //设置图层尺寸
    layer.bounds = CGRectMake(0, 0, 200, 200);
    //设置图层位置
    layer.position = CGPointMake(100, 100);
    //设置图层颜色
    layer.backgroundColor = [UIColor redColor].CGColor;
    //设置图层内容
    layer.contents = (id)[UIImage imageNamed:@"2"].CGImage;//这里要强制转化（id）类型
    //加到View成为主图层
    [self.view.layer addSublayer:layer];
}

效果图如下：（原图就是全绿色的）
这里写图片描述

2.
学习技巧：
这里写图片描述

这里写图片描述

根据anchorPoint的位置和position的位置共同决定了图层以什么位置对应在视图中，如下所示：

3.
学习技巧：
隐式动画
系统自带的UIView都有个根层，但是不存在动画，自己创建的图层才有动画。
这里写图片描述

如果想要隐式动画：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //自定义图层
    CALayer *layer = [CALayer layer];
    //尺寸
    layer.bounds = CGRectMake(0, 0, 100, 100);
    //颜色
    layer.backgroundColor = [UIColor redColor].CGColor;

    [self.view.layer addSublayer:layer];

    _layer = layer;//赋值
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

    _layer.position = CGPointMake(100, 100);//自动添加了隐式动画
    _layer.borderWidth = arc4random_uniform(10)+1;
    _layer.borderColor  =[UIColor blueColor].CGColor;
}

如果要禁用隐式动画:

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [CATransaction begin];//开启事务
    //禁止隐式动画
    [CATransaction setDisableActions:YES];
    _layer.position = CGPointMake(100, 100);//自动添加了隐式动画
    [CATransaction commit];//提交事务
}

添加了一些小效果：

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject ];
    CGPoint pos = [touch locationInView:self.view];//获取触摸位置
//    _layer.position = CGPointMake(100, 100);//自动添加了隐式动画
    _layer.borderWidth = arc4random_uniform(10)+1;//随机宽度
    CGFloat r = arc4random_uniform(256)/255.0;
    CGFloat g = arc4random_uniform(256)/255.0;
    CGFloat b = arc4random_uniform(256)/255.0;
    _layer.borderColor  =[UIColor colorWithRed:r green:g blue:b alpha:1 ].CGColor;//随机边框颜色
    _layer.cornerRadius = arc4random_uniform(50);
    _layer.position = pos;//这是就可以图层随之而动了
}

4.
学习技巧：
将一个UIView按照某点进行旋转

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _redView.layer.anchorPoint = CGPointMake(0.5, 1);//锚点要在这里设置
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

    _redView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1);
}

5.
学习技巧：
秒针的实现

#import "ViewController.h"
#define angle2radian(x) ((x)/  180.0 * M_PI)
#define perSecondA 6 //设置每秒转多少度
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *clockView;

@property (weak,nonatomic) CALayer *layer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _clockView.frame = CGRectMake(0, 0, 119, 119);
    CGFloat imageW = _clockView.bounds.size.width;
    CGFloat imageH = _clockView.bounds.size.height;
    //1.添加秒针
    CALayer *second = [CALayer layer];
    //2.设置锚点
    second.anchorPoint  = CGPointMake(0.5, 1);
    //3.设置位置
    second.position = CGPointMake(imageW*0.5, imageH*0.5);
    //4.设置尺寸
    second.bounds = CGRectMake(0, 0, 1, imageH*0.5-20);
    //5.设置颜色
    second.backgroundColor = [UIColor redColor].CGColor;
    //添加到图层上
    [_clockView.layer addSublayer:second];

    _layer = second;
    //获取秒数
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //获取日期组件
    NSDateComponents *compoents = [calendar components:NSCalendarUnitSecond fromDate:[NSDate date]];
    //获取秒数
    CGFloat sec = compoents.second;
    NSLog(@"%f",sec);
    //开始转的角度
    CGFloat sencondA = sec *perSecondA;

    second.transform = CATransform3DMakeRotation(angle2radian(sencondA), 0, 0, 1);

    //创建个定时器
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeupdate) userInfo:nil repeats:YES];
    [self timeupdate];
}

-(void)timeupdate
{
    //获取秒数
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //获取日期组件
    NSDateComponents *compoents = [calendar components:NSCalendarUnitSecond fromDate:[NSDate date]];
    //获取秒数
    CGFloat sec = compoents.second;
    NSLog(@"%f",sec);
    //开始转的角度
    CGFloat sencondA = sec *perSecondA;

     _layer.transform = CATransform3DMakeRotation(angle2radian(sencondA), 0, 0, 1);
        NSLog(@"%s\n",__func__);
}

使用kvc设值的方式：

//     _layer.transform = CATransform3DMakeRotation(angle2radian(sencondA), 0, 0, 1);
    [_layer setValue:@(angle2radian(sencondA)) forKeyPath:@"transform.rotation"];//此方法有严重bug，不能用这个函数,秒针跳转到6的时候会自动多跳转一周，具体原因未知

6.
学习技巧：
完整的时钟程序：

#import "ViewController.h"
#define angle2radian(x) ((x)/  180.0 * M_PI)
#define perSecondA 6 //设置每秒转多少度
#define perMiniuteA 6 //设置每分钟转多少度
#define perHourA 30 //设置一小时转30度
#define perMiniuteHour 0.5 //每分钟时针转的角度
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *clockView;

@property (weak,nonatomic) CALayer *layer;
@property (weak,nonatomic) CALayer *layerM;
@property (weak,nonatomic) CALayer *layerH;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //添加秒针
    [self addSecond];
    //添加分针
    [self addMinute];
    //添加时针
    [self addHour];
    //获取秒数
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //获取日期组件
    NSDateComponents *compoents = [calendar components:NSCalendarUnitSecond fromDate:[NSDate date]];
    //获取秒数
    CGFloat sec = compoents.second;
    NSLog(@"%f",sec);
    //开始转的角度
    CGFloat sencondA = sec *perSecondA;

    _layer.transform = CATransform3DMakeRotation(angle2radian(sencondA), 0, 0, 1);

    //创建个定时器
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeupdate) userInfo:nil repeats:YES];
    [self timeupdate];
}

-(void)addSecond
{
    _clockView.frame = CGRectMake(0, 0, 119, 119);
    CGFloat imageW = _clockView.bounds.size.width;
    CGFloat imageH = _clockView.bounds.size.height;
    //1.添加秒针
    CALayer *second = [CALayer layer];
    //2.设置锚点
    second.anchorPoint  = CGPointMake(0.5, 1);
    //3.设置位置
    second.position = CGPointMake(imageW*0.5, imageH*0.5);
    //4.设置尺寸
    second.bounds = CGRectMake(0, 0, 1, imageH*0.5-10);
    //5.设置颜色
    second.backgroundColor = [UIColor redColor].CGColor;
    //添加到图层上
    [_clockView.layer addSublayer:second];

    _layer = second;
}

-(void)addMinute
{
    _clockView.frame = CGRectMake(0, 0, 119, 119);
    CGFloat imageW = _clockView.bounds.size.width;
    CGFloat imageH = _clockView.bounds.size.height;
    //1.添加分针
    CALayer *minute = [CALayer layer];
    //2.设置锚点
    minute.anchorPoint  = CGPointMake(0.5, 1);
    //3.设置位置
    minute.position = CGPointMake(imageW*0.5, imageH*0.5);
    //4.设置尺寸
    minute.bounds = CGRectMake(0, 0, 2, imageH*0.5-20);
    //5.设置颜色
    minute.backgroundColor = [UIColor blueColor].CGColor;
    //添加到图层上
    [_clockView.layer addSublayer:minute];

    _layerM = minute;
}

-(void)addHour
{
    _clockView.frame = CGRectMake(0, 0, 119, 119);
    CGFloat imageW = _clockView.bounds.size.width;
    CGFloat imageH = _clockView.bounds.size.height;
    //1.添加分针
    CALayer *hour = [CALayer layer];
    //2.设置锚点
    hour.anchorPoint  = CGPointMake(0.5, 1);
    //3.设置位置
    hour.position = CGPointMake(imageW*0.5, imageH*0.5);
    //4.设置尺寸
    hour.bounds = CGRectMake(0, 0, 3, imageH*0.5-30);//3代表着宽度
    //5.设置颜色
    hour.backgroundColor = [UIColor blackColor].CGColor;
    //更改圆角半径
    hour.cornerRadius = 4;//让时针头部变得圆些
    //添加到图层上
    [_clockView.layer addSublayer:hour];

    _layerH = hour;
}
-(void)timeupdate
{
    //获取秒数
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //获取日期组件
    NSDateComponents *compoents = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute |NSCalendarUnitHour fromDate:[NSDate date]];//如果看到左移右移的符号

    //获取秒数
    CGFloat sec = compoents.second;
    //获取分钟
    CGFloat minute = compoents.minute;
    CGFloat hour = compoents.hour;
    NSLog(@"%f",sec);
    //开始转的角度
    CGFloat sencondA = sec *perSecondA;
    CGFloat minuteA = minute *perMiniuteA;
    CGFloat hourA = minute*perMiniuteHour + perHourA*hour;

    _layer.transform = CATransform3DMakeRotation(angle2radian(sencondA), 0, 0, 1);
    _layerM.transform = CATransform3DMakeRotation(angle2radian(minuteA), 0,0, 1);
    _layerH.transform = CATransform3DMakeRotation(angle2radian(hourA), 0, 0, 1);
        NSLog(@"%s\n",__func__);
}