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__);
}
效果如下: