UI- Layer的使用总结（附动画）

#pargma mark - Layer

1. 设置当前视图的背景颜色

self.view.backgroundColor = [UIColor lightGrayColor];

2. 创建一个视图，并且设置frame

UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 100, 100)];

3. 将创建的视图添加到当前视图

[self.view addSubview:myView];

4. 设置创建视图的背景颜色

myView.backgroundColor = [UIColor blueColor];

5. 设置视图的层属性，每个视图都关联着一个Layer

设置 创建视图图层 的 背景颜色，即为 视图 本身 的 背景颜色 可通过Debug查看

myView.layer.backgroundColor = [UIColor redColor].CGColor;

// myView.backgroundColor = [UIColor yellowColor];

设置图层的边界宽度

myView.layer.borderWidth = 10;

设置图层的边界颜色 ，默认为黑色

myView.layer.borderColor = [UIColor whiteColor].CGColor;

设置拐点的圆角半径， 可以巧妙的利用该方法画圆（将圆角半径设置为视图宽度的一般即可）

myView.layer.cornerRadius = 50;

添加一张图片

myView.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"btn_02"].CGImage);

将图片超出圆角半径的内容裁剪掉

myView.clipsToBounds = YES;

//myView.layer.masksToBounds = YES;

6.基础动画: 3种方式 --> 中心点移动/大小变化/旋转

CABasicAnimation *basicAnimation = [CABasicAnimation animation];

动画时间

basicAnimation.duration = 2;

动画重复次数

basicAnimation.repeatCount = 3;

basicAnimation.removedOnCompletion = YES;

//填充模式4中 至今木有弄懂  `backwards', `forwards', `both' and `removed'

// basicAnimation.fillMode = @"backwards";

6.1 中心点移动动画

basicAnimation.fromValue = [NSValue valueWithCGPoint: CGPointMake(50, 50) ];

basicAnimation.byValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];

basicAnimation.keyPath = @"position";

6.2 大小变化动画

basicAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 400)];

basicAnimation.keyPath = @"bounds";

6.3 旋转

basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4 + M_PI_2, 0, 0, 1)];

basicAnimation.keyPath = @"transform";

//注意：设置完动画后要添加动画

[myLayer addAnimation:basicAnimation forKey:nil];

7. 关键帧动画: 两种方式 --> 定义关键点/定义路径

CAKeyframeAnimation *keyFrameAni = [CAKeyframeAnimation animation];

keyFrameAni.duration = 2;

keyFrameAni.repeatCount = 3;

7.1 定义关键点

NSValue *value1 = [NSValue valueWithCGPoint: CGPointMake(50, 50) ];

NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];

NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(300, 300)];

keyFrameAni.keyPath = @"position";

keyFrameAni.values = @[value1,value2,value3];

7.2 定义路径

CGMutablePathRef path = CGPathCreateMutable();

//CGPathAddEllipseInRect(path, nil, CGRectMake(50, 50, 300, 400));

CGPathAddArc(path, nil, 100, 100, 50, M_PI_2, M_PI, YES);

keyFrameAni.path = path;

CGPathRelease(path);

keyFrameAni.keyPath = @"position";

[myLayer addAnimation:keyFrameAni forKey:nil];

8. 转换动画 --> 可有立体效果

CATransition *transAnimaiton = [CATransition animation];

transAnimaiton.duration = 3;

transAnimaiton.type = @"cube";

transAnimaiton.subtype = @"fromTop";

[myLayer addAnimation:transAnimaiton forKey:nil];