本文并非最终版本，如果想要关注更新或更正的内容请关注文集，联系方式详见文末，如有疏忽和遗漏，欢迎指正。
本文相关目录：
===================== 所属文集：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 图形和多媒体 =====================
1、CALayer的创建
layer 的创建:
CALayer *layer = [[CALayer alloc] init]; // 创建layer
layer 的添加:
[self.view.layer addSublayer:layer]; // 把创建的layer 添加到 view的layer当中
代码示例：
#define degree2angle(angle) ((angle)*M_PI / 180)
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) CALayer *layer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// frame => 用 bounds & position
UIView *redView =
[[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
// 背景色
redView.backgroundColor = [UIColor redColor];
// 边框
redView.layer.borderWidth = 10;
// borderColor 是一个 CGColor类型，通过[UIColor xxxxColor].CGColor 转换
redView.layer.borderColor = [UIColor whiteColor].CGColor;
// 阴影
redView.layer.shadowOffset = CGSizeZero;
redView.layer.shadowColor = [UIColor blueColor].CGColor;
redView.layer.shadowOpacity = 1;
redView.layer.shadowRadius = 50; //半径
// 圆角
redView.layer.cornerRadius = 50;
redView.layer.masksToBounds = YES; //超出layer 的部分剪切
// 大小
redView.layer.bounds = CGRectMake(0, 0, 200, 200);
// 位置 (默认的情况下 positon的点 表示 view中心的位置)
redView.layer.position = CGPointMake(100, 100);
// 内容 (将一个UIImage类型转换为CGImageRef)
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"TD"].CGImage);
// 颜色
redView.layer.backgroundColor = [UIColor blueColor].CGColor;
// 将自定义layer添加到视图（图层是可以嵌套的）
[self.view addSubview:redView];
self.layer = redView.layer;
}
#pragma mark - 在CALayer头文件中所有标注Animatable的属性，都是可以动画的
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 获取触摸对象
UITouch *touch = touches.anyObject;
// 获取手指的位置
CGPoint location = [touch locationInView:self.view];
// position 设置图层的位置
self.layer.position = location;
// 修改图层属性
// 问题：同时指定transform，前面的会被后面的覆盖
// 用"大招" KVC来解决，可以做到形变参数的叠加
// 1.缩放
CGFloat scale = (arc4random_uniform(5) + 1) / 10.0 + 0.5;
// self.layer.transform = CATransform3DMakeScale(scale, scale, 0);
[self.layer setValue:@(scale) forKeyPath:@"transform.scale"];
// 2. 旋转69
CGFloat rotate = degree2angle(arc4random_uniform(360));
// self.layer.transform = CATransform3DMakeRotation(rotate, 0, 0, 1);
[self.layer setValue:@(rotate) forKeyPath:@"transform.rotation.y"];
// 3. 透明度
CGFloat alpha = (arc4random_uniform(5) + 1) / 10.0 + 0.5;
// self.layer.opacity = alpha;
[self.layer setValue:@(alpha) forKeyPath:@"opacity"];
// 4. 设置圆角半径
CGFloat r = arc4random_uniform(self.layer.bounds.size.width * 0.5);
self.layer.cornerRadius = r;
// 5. 设置边线
self.layer.borderColor = [self randomColor].CGColor;
self.layer.borderWidth = 3.0;
}
- (UIColor *)randomColor {
CGFloat r = arc4random_uniform(256) / 255.0;
CGFloat b = arc4random_uniform(256) / 255.0;
CGFloat g = arc4random_uniform(256) / 255.0;
return [UIColor colorWithRed:r green:g blue:b alpha:1];
}
@end
运行效果：
CALayer的创建.gif
2、非根layer的隐式动画
Root Layer（根层）:
每一个UIView内部都默认关联着一个CALayer，我们可称这个Layer为Root Layer（根层）
- 所有的
非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画 - 控件的根layer是没有隐式动画的
- 隐式动画的默认时长为1/4秒
隐式动画：
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果，这些动画称为隐式动画
CALayer的"可动画属性"
- 凡是文档中有"Animatable"字样的属性都是可动画属性
- 可动画属性就是说: 只要设置了属性（改变了属性）, 会自动使用画的方式来执行。
可动画属性：
当对非Root Layer的部分属性进行相应的修改时，默认会自动产生一些动画效果，这些属性称为Animatable Properties(可动画属性)
- bounds：（缩放动画）用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
- backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
- position：（平移动画）用于设置CALayer的位置。修改这个属性会产生平移动画
- opacity：（改变透明度）淡入淡出动画
layer禁用隐式动画：
可以通过动画事务(CATransaction)关闭默认的隐式动画效果
#pragma mark - 关闭默认的隐式动画效果
UITouch *t = touches.anyObject; // 获取触摸对象
CGPoint p = [t locationInView:t.view]; // 获取手指的位置
// 事务
[CATransaction begin]; // 开启事务
[CATransaction setDisableActions:YES]; // 禁用隐式动画
self.layer.position = p; // 更改可动画属性（这里是更改位置）
[CATransaction commit]; // 提交事务
示例代码：
#define angle2radion(angle) ((angle) / 180.0 * M_PI)
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) CALayer *layer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建一个非根layer
CALayer *layer = [[CALayer alloc] init];
// 可动画属性
layer.bounds = CGRectMake(0, 0, 100, 100); // 大小
layer.position = CGPointMake(100, 100); // 位置
layer.backgroundColor = [UIColor redColor].CGColor; // 颜色
layer.opacity = 0.9; // 透明度
// 把layer添加到view的layer上
[self.view.layer addSublayer:layer];
// 给全局属性赋值
// self.layer = layer;
_layer = layer;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
#pragma mark - layer随机旋转
_layer.transform = CATransform3DMakeRotation(
angle2radion(arc4random_uniform(360) + 1), 0, 0, 1);
_layer.position =
CGPointMake(arc4random_uniform(200) + 20, arc4random_uniform(400) + 50);
_layer.cornerRadius = arc4random_uniform(50);
_layer.backgroundColor = [self randomColor].CGColor;
_layer.borderWidth = arc4random_uniform(10);
_layer.borderColor = [self randomColor].CGColor;
#pragma mark - 关闭默认的隐式动画效果
UITouch *t = touches.anyObject; // 获取触摸对象
CGPoint p = [t locationInView:t.view]; // 获取手指的位置
// 事务
[CATransaction begin]; // 开启事务
[CATransaction setDisableActions:YES]; // 禁用隐式动画
self.layer.position = p; // 更改可动画属性（这里是更改位置）
[CATransaction commit]; // 提交事务
}
- (UIColor *)randomColor {
CGFloat r = arc4random_uniform(256) / 255.0;
CGFloat b = arc4random_uniform(256) / 255.0;
CGFloat g = arc4random_uniform(256) / 255.0;
return [UIColor colorWithRed:r green:g blue:b alpha:1];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
非根layer的隐式动画.gif
本文源码 Demo 详见 Github
https://github.com/shorfng/iOS_6.0_Graphics_and_multimedia.git
作者：蓝田（Loto）
出处： 简书
如果你觉得本篇文章对你有所帮助，请点击文章末尾下方“喜欢”
如有疑问，请通过以下方式交流：
① 评论区回复 ② 微信（加好友请注明“简书+称呼”） ③发送邮件至 shorfng@126.com
本文版权归作者和本网站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
网友评论