Layer學習筆記

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__);
}

效果如下:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章