- 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView
- 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层
- 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer;
- 当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示
- 换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能
CA: Core Animation (核心动画)
CALayer和UIView的关系
- CALayer 负责视图中显示内容和动画
- UIView 负责监听和响应事件
CALayer的基本属性
阴影、圆角大小、边框宽度和颜色
宽度和高度
@property CGRect bounds;
位置(默认指中点,具体由anchorPoint决定)
@property CGPoint position;
锚点(x,y的范围都是0-1),决定了position的含义
@property CGPoint anchorPoint;
背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;
形变属性
@property CATransform3D transform;
边框颜色(CGColorRef类型)
@property CGColorRef borderColor;
边框宽度
@property CGFloat borderWidth;
圆角半径
@property CGFloat cornerRadius;
内容(比如设置为图片CGImageRef)
@property(retain) id contents;
- (void)viewDidLoad{
[super viewDidLoad];
UIView* redView = [[UIView alloc] init];
redView.frame = CGRectMake(100, 100, 100, 100);
redView.backgroundColor = [UIColor redColor];
// 1>边框
redView.layer.borderWidth = 10; // 边框的宽度
redView.layer.borderColor = [UIColor grayColor].CGColor; // 边框的颜色
// 2>阴影
redView.layer.shadowOffset = CGSizeZero; // 阴影的偏移量
redView.layer.shadowColor = [UIColor blueColor].CGColor; // 阴影的颜色
redView.layer.shadowRadius = 50; // 阴影的半径
redView.layer.shadowOpacity = 1; // 阴影的透明度
// 3>圆角
redView.layer.cornerRadius = 50; // 圆角半径
redView.layer.masksToBounds = YES; // 裁剪超出 layer 范围的东西
// 4>bounds
// redView.layer.bounds = CGRectMake(0, 0, 200, 200);
// 5>postion属性和view.center的关系 // 默认 center 跑到 position 的位置上
// redView.layer.position = CGPointMake(0, 0);
// 6>设置内容(图片)
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"me"].CGImage);
[self.view addSubview:redView];
self.layer = redView.layer;
}
- (void)touchesBegan:(NSSet<UITouch*>*)touches withEvent:(UIEvent*)event{
// self.layer.opacity = 0; // 透明度
// self.layer.bounds = CGRectMake(0, 0, 200, 200);
// 获取触摸对象
UITouch* t = touches.anyObject;
// 获取手指当前的位置
CGPoint p = [t locationInView:t.view];
// 让layer 跑到手指的位置
self.layer.position = p;
}
@end
如果想改layer的 x y 宽 高 --> 不要改frame 后面做动画会有问题 去改 layer的bounds和postion
self.view add subvie:redview; 白纸上面放了一张红色的纸
self.layer addsyblayer:redlayer; 白纸中间涂成了红色
UIView和CALayer的选择
- 通过CALayer,就能做出跟UIImageView一样的界面效果
- 既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?
-
其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以
-
所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以
-
当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级
UIView : 接受和处理系统事件、触摸事件。
CALayer : 显示内容
隐式动画(可动画属性)
- 每一个UIView内部都默认关联着一个CALayer,我们可称这个Layer为Root Layer(根层)
- 所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画
什么是隐式动画?
- 当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果
- 而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties:
- bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
- backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
- position:用于设置CALayer的位置。修改这个属性会产生平移动画
可以通过动画事务(CATransaction)关闭默认的隐式动画效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];
控件的根layer没有隐式动画 uiwidows下的就是根layer
position和anchorPoint
CALayer有2个非常重要的属性:position和anchorPoint
@property CGPoint position;
- 用来设置CALayer在父层中的位置
- 以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;
- 称为“定位点”、“锚点”
- 决定着CALayer的position属性所指的是哪个点
- 以自己的左上角为原点(0, 0)
- 它的x、y取值范围都是0~1,默认值为(0.5, 0.5)
设置position 是让layer的中心跑到position的位置上 默认
anchorPoint 是将这个锚点的位置放在position 上
@interface ViewController ()
@property (nonatomic, weak) CALayer* second;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 创建表盘
CALayer* clock = [[CALayer alloc] init];
clock.bounds = CGRectMake(0, 0, 200, 200); // 大小
clock.position = CGPointMake(200, 200); // 位置
// 设置图片
clock.contents = (__bridge id)[UIImage imageNamed:@"clock"].CGImage;
// 设置圆角
clock.cornerRadius = 100;
clock.masksToBounds = YES;
// 创建秒针
CALayer* second = [[CALayer alloc] init];
second.bounds = CGRectMake(0, 0, 2, 100); // 大小
second.position = clock.position; // 位置
second.backgroundColor = [UIColor redColor].CGColor; // 颜色
// 锚点 定位点
second.anchorPoint = CGPointMake(0.5, 0.8);
// 添加表盘
[self.view.layer addSublayer:clock];
// 添加秒针
[self.view.layer addSublayer:second];
// 给全局属性赋值
self.second = second;
// 计时器
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
[self timeChange];
}
// 旋转(一秒一次)
- (void)timeChange{
// 一秒钟旋转的角度
CGFloat angle = 2 * M_PI / 60;
NSDate* date = [NSDate date];
// 真实的时间
// 15:00:20 000
// 15:00:20 999
// // 1.nsdate
// // 创建一个时间格式化的对象
// NSDateFormatter* formatter = [[NSDateFormatter alloc] init];
// formatter.dateFormat = @"ss";
// CGFloat time = [[formatter stringFromDate:date] floatValue];
// 2.日历
NSCalendar* cal = [NSCalendar currentCalendar];
CGFloat time = [cal component:NSCalendarUnitSecond fromDate:date];
self.second.affineTransform = CGAffineTransformMakeRotation(time * angle);
}
@end