6.2 核心动画->1.1 CALayer的基本属性
2016-07-25 本文已影响171人
蓝田_Loto
本文并非最终版本，如果想要关注更新或更正的内容请关注文集，联系方式详见文末，如有疏忽和遗漏，欢迎指正。
本文相关目录：
===================== 所属文集：6.0 图形和多媒体 =====================
6.2 核心动画->1.0 CALayer的简介
6.2 核心动画->1.1 CALayer的基本属性
6.2 核心动画->1.2 CALayer的创建 & 非根layer的隐式动画
6.2 核心动画->2.0 Core Animation(核心动画)
6.2 核心动画->3.0 核心动画 & UIView动画
6.2 核心动画->4.0 常用动画效果
===================== 所属文集：6.0 图形和多媒体 =====================
layer边框：
- 边框宽度
@property CGFloat borderWidth;
- 边框颜色(CGColorRef类型)
@property(nullable) CGColorRef borderColor;
举例：
// 边框宽度
redView.layer.borderWidth = 10;
// 边框颜色(CGColorRef类型) ，通过[UIColor xxxxColor].CGColor 转换
redView.layer.borderColor = [UIColor whiteColor].CGColor;
layer阴影：
"阴影"效果(shadowColor、shadowOffset、shadowOpacity属性需要同时设置后才可以看到)
@property float shadowOpacity; // 默认为0，范围0-1（透明-不透明），Opacity：不透明度
@property CGSize shadowOffset; // 阴影的偏移量，默认位置（0，-3），
@property(nullable) CGColorRef shadowColor; //阴影颜色
@property CGFloat shadowRadius; // 阴影的圆角半径
举例：
redView.layer.shadowOpacity = 1;
redView.layer.shadowOffset = CGSizeZero; // CGSizeZero表示0
redView.layer.shadowOffset = CGSizeMake(20, 20);
redView.layer.shadowColor = [UIColorblueColor].CGColor; //阴影颜色
redView.layer.shadowRadius = 20; // 阴影的圆角半径
layer圆角:
对于正方形来说, 当圆角半径为边长的一半的时候, 就是一个圆形
- layer的圆角半径
@property CGFloat cornerRadius;
- 超出layer的部分不再显示
// maskToBounds=YES：可看做是强制内部的所有子层支持圆角效果，少了这个设置，UIImageView是不会有圆角效果
// 如果设置了maskToBounds=YES，那将不会有阴影效果
@property BOOL masksToBounds;
举例：
redView.layer.cornerRadius = 50; // 设置layer的圆角半径
redView.layer.masksToBounds = YES; // 超出layer的部分不再显示(裁剪,设置头像的时候加上)
layer大小:
- 宽度和高度
@property CGRect bounds;
举例：
testView.layer.bounds = CGRectMake(0, 0, 200, 200);
layer位置:
默认情况下，CALayer的中点会在position所指定的位置上。而anchorPoint的x、y取值范围都是0~1，默认值为(0.5, 0.5)，为其他值时，则会有相应的变化。因为它决定着CALayer身上的哪个点会在position所指定的位置上
// 位置 (默认指中点，具体由anchorPoint决定)
// 用来设置CALayer在父层中的位置 , 以父层的左上角为原点(0, 0)
@property CGPoint position;
testView.layer.position = CGPointMake(0, 0); // 默认position 的点是view的center
// 锚点、定位点 (x,y的范围都是0-1)，它决定着CALayer身上的哪个点会在position属性所指的位置
// 以自己的左上角为原点(0, 0) 它的x、y取值范围都是0~1，默认值为（0.5, 0.5）
@property CGPoint anchorPoint;
anchorPoint.gif
position和anchorPoint.gif
layer内容：
- 内容（比如设置为图片CGImageRef）
// UIKit 中使用的是 Foundation 框架, 而 Foundation 框架又使用的是 Core Foundation 框架
// Core Foundation 框架都是 C 语言的, 一般凡是 Core Xxxx 的框架都是 C 语言的。
// __bridge 类型 表达式, 的作用一般就是把 Core Foundation 中的数据类型转换成Foundation 中的类型, 桥接的时候也会设置到一些所有权的转换等。
@property(nullable, strong) id contents;
举例：
// 设置图层内容 (将一个UIImage类型转换为CGImageRef)<c对象转换成oc对象>
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"TD"].CGImage);
layer背景颜色:
- 背景颜色(CGColorRef类型)
@property(nullable) CGColorRef backgroundColor;
举例：
testView.layer.backgroundColor = [UIColor blueColor].CGColor;
layer透明度:
@property float opacity;
举例：
testView.opacity = 0;
代码示例：（本示例需要注释一些代码才能显示相应效果，不再赘述）
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 创建一个redView
UIView *redView =
[[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 边框宽度
redView.layer.borderWidth = 10;
// 边框颜色(CGColorRef类型) ，通过[UIColor xxxxColor].CGColor 转换
redView.layer.borderColor = [UIColor whiteColor].CGColor;
// 阴影（在CA框架中不能直接使用UIKit的数据类型）
redView.layer.shadowOpacity = 1; //图层中的Opacity相当于view的alpha属性
redView.layer.shadowOffset = CGSizeZero; // //阴影偏移点，CGSizeZero表示0
// redView.layer.shadowOffset = CGSizeMake(20, 20);
redView.layer.shadowColor = [UIColor blueColor].CGColor; //阴影颜色
redView.layer.shadowRadius = 50; // 阴影的圆角半径
// 圆角半径
redView.layer.cornerRadius = 50; // 设置控件的主层的圆角半径
// 如有图片，一般都是显示在contents上而非主层上
NSLog(@"%@", redView.layer.contents);
// 超出主层边框的内容全部裁剪掉，类似于clip，使用masksToBounds阴影效果无效
// 超出layer的部分不再显示(裁剪,设置头像的时候加上)
redView.layer.masksToBounds = YES;
// 大小
redView.layer.bounds = CGRectMake(0, 0, 200, 200);
// 位置 (默认的情况下 positon的点 表示 view中心的位置)
redView.layer.position = CGPointMake(100, 100);
// 设置图层内容 (将一个UIImage类型转换为CGImageRef)<c对象转换成oc对象>
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"TD"].CGImage);
// 颜色
redView.layer.backgroundColor = [UIColor blueColor].CGColor;
// 图层形变：旋转和缩放
[UIView animateWithDuration:1
animations:^{
// 旋转方法1：
redView.layer.transform =
CATransform3DMakeRotation(M_PI, 1, 1, 0);
// 旋转方法2：KVC
// [redView.layer setValue:@(M_PI)
// forKeyPath:@"transform.rotation"];
// 缩放方法1：
redView.layer.transform =
CATransform3DMakeScale(0.5, 0.5, 1);
// 缩放方法2：快速进行图层缩放, KVC方式，x, y同时缩放0.5
// [redView.layer setValue:@0.5
// forKeyPath:@"transform.scale"];
}];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
CALayer基本属性.gif
CALayer的transform属性
transform的属性列表：
transform的属性列表.png
// 平移(z轴没反应)
// Translate 't' by '(tx, ty, tz)' and return the result: t' = translate(tx, ty, tz) * t. __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3Dt,CGFloattx, CGFloat ty, CGFloat tz);
// 缩放(z轴 没反应)
// Scale 't' by '(sx, sy, sz)' and return the result: t' = scale(sx, sy, sz) * t. __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERNC ATransform3D CATransform3DScale (CATransform3Dt,CGFloatsx, CGFloat sy, CGFloat sz);
// 旋转：从layer的中心点到给定的坐标点之间连一条线, 然后以这个线为中心轴, 开始旋转
// Rotate 't' by 'angle' radians about the vector '(x, y, z)' and return the result. If the vector has zero length the behavior is undefined: t' = rotation(angle, x, y, z) * t. __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERN CATransform3D CATransform3DRotate (CATransform3Dt,CGFloatangle, CGFloat x, CGFloat y, CGFloat z);
layer形变属性:
- 旋转,缩放,平移
@property CATransform3D transform;
举例：
// 旋转
self.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 0, 0);
// x
self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 1, 0, 0);
// y
self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 0, 1, 0);
// z
self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 0, 0, 1);
// 缩放
// x
self.layer.transform = CATransform3DScale(self.layer.transform, 0.5, 1, 1);
// y
self.layer.transform = CATransform3DScale(self.layer.transform, 1, 0.5, 1);
// z (无效果)
self.layer.transform = CATransform3DScale(self.layer.transform, 1, 1, 0.5);
// 平移 (z无效果)
self.layer.transform = CATransform3DTranslate(self.layer.transform, 100, 100, 100);
代码示例：
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) CALayer *layer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(0, 0, 100, 100); // 大小
layer.position = CGPointMake(100, 100); // 位置
layer.backgroundColor = [UIColor redColor].CGColor; // 颜色
layer.opacity = 1; // 透明度
[self.view.layer addSublayer:layer];
layer.contents = (__bridge id)[UIImage imageNamed:@"me"].CGImage;
// 给全局属性赋值
self.layer = layer;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 旋转
self.layer.transform =
CATransform3DRotate(self.layer.transform, M_PI_4, 0, 0, 1);
// 平移(z轴 没反应)
self.layer.transform =
CATransform3DTranslate(self.layer.transform, 10, 10, 0);
// 缩放(z轴 没反应)
self.layer.transform = CATransform3DScale(self.layer.transform, 1, 1, 0.5);
}
@end
运行效果：
CALayer的transform属性.gif
本文源码 Demo 详见 Github
https://github.com/shorfng/iOS_6.0_Graphics_and_multimedia.git
作者：蓝田（Loto）
出处： 简书
如果你觉得本篇文章对你有所帮助，请点击文章末尾下方“喜欢”
如有疑问，请通过以下方式交流：
① 评论区回复 ② 微信（加好友请注明“简书+称呼”） ③发送邮件至 shorfng@126.com
本文版权归作者和本网站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
