Quartz2D复习（四） --- 图层CALayer和动画CAAnimation

1、CALayer

1)、在ios中，能看得见摸得着的东西基本上都是UIView， 比如按钮、文本标签、文本输入框、图标等，这些都是UIView

2)、UIView之所以能显示在屏幕上，完全是因为它内部的一个图层

3)、在创建UIView对象时，UIView内部会自动创建一个图层（即CALayer对象），通过UIView的layer属性可以访问这个层：@property (nonatomic,readonly,retain) CALayer *layer;

4)、当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示。UIView本身不具备显示的功能，是它内部的层才有显示功能

5)、通过CALayer对象，可以很方便的调整UIView的一些外观属性，比如：阴影、圆角大小、边框宽度和颜色。。。，还可以给图层添加动画，来实现一些比较炫酷的效果

6)、CALayer属性：

　　@property CGRect bounds; //宽度和高度

　　@property CGPoint position;　　//位置（默认指中点，具体由anchorPoint决定）

　　@property CGPoint anchorPoint;　　//锚点（x、y的范围都是0->1），决定了position的含义

　　@property CGColorRef backgroundColor;　　//背景颜色（CGColorRef类型）

　　@property CATransform3D transform;　　//形变属性

　　@property CGColorRef borderColor;　　//边框颜色（CGColorRef类型）

　　@property CGFloat borderWidth;　　　　//边框宽度

　　@property CGFloat conerRadius;　　//圆角半径

　　@property id contents;　　//内容（比如设置图片CGImageRef)

　　@property CGColorRef shadowColor;　　//阴影颜色

　　@property float shadowOpacity;　　//阴影不透明（取值范围0.0 -> 1.0）

　　@property CGSize shadowOffset;　　//阴影偏移位置

7)、CALayer是定义在QuartzCore框架中的[Core Animation]；

　　CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中；

　　UIColor、UIImage是定义在UIKit框架中的；

　　QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在ios和Mac OSX上能使用；

　　但是UIKit只能在ios中使用；为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

8)、UIView和CALayer的比较

　　通过CALayer，可以做出跟UIView一样的界面效果；但是UIView多了一个事件处理的功能，CALayer不能处理用户的触摸事件；

　　不过CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级

9)、每个UIView内部都默认关联着一个CALayer， 我们可以称这个CALayer为RootLayer（跟层）；

　　所有的非RootLayer, 也就是手动创建的CALayer对象，都存在着隐式动画；

　　隐式动画是指当对非RootLayer的部分属性进行修改时，默认会自动产生一些动画效果；这些属性称为Animatable Properties(可动画属性）

　　几个常见的Animatable Properties: bounds、backgroundColor、position

　　可以通过动画事务（CATransaction)关闭默认的隐式动画效果：

//  图层动画
//

#import "AnimationViewController.h"

@interface AnimationViewController ()

@property (nonatomic, retain) UIImageView *imgView;
@property (nonatomic, retain) UIImageView *imgView2;
@property (nonatomic, assign) NSInteger index;

@end

@implementation AnimationViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self.view setBackgroundColor:[UIColor whiteColor]];

[self addPreBtn];   //增加返回按钮
[self testLayer]; //图层
}

- (void)testLayer{
//1、增加UIView
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(80, 30, 100, 100)];
[self.view addSubview:view];
view.layer.backgroundColor = [UIColor redColor].CGColor;
view.layer.cornerRadius = 50; //图层半径: 50刚好一个圆；小于50为一个圆角方形, 大于50为变型的图形

view.layer.borderWidth = 5;
view.layer.borderColor = [UIColor greenColor].CGColor;
//阴影
view.layer.shadowColor = [UIColor yellowColor].CGColor;
view.layer.shadowRadius = 10;
view.layer.shadowOpacity = 1; //1表示阴影不透明；0表示透明，阴影看不见

//1.2增加子图层
CALayer *subLayer = [[CALayer alloc] init];
subLayer.position = CGPointMake(50, 50);
subLayer.anchorPoint = CGPointMake(0.5, 1);
subLayer.bounds = CGRectMake(0, 0, 50, 50);
[subLayer setBackgroundColor:[UIColor purpleColor].CGColor];
[view.layer addSublayer:subLayer];

//2、增加UIImageView
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(200, 30, 100, 100)];
imgView.image = [UIImage imageNamed:@"first"];
[self.view addSubview:imgView];
imgView.layer.cornerRadius = 50; //等于50刚好裁剪一个圆；小雨50为圆角方形；大于50变形
imgView.layer.masksToBounds = YES; //现实裁剪
imgView.layer.borderWidth = 5;
imgView.layer.borderColor = [UIColor redColor].CGColor;
imgView.layer.shadowRadius = 5;
self.imgView = imgView;
//    imgView.layer.shadowColor = [UIColor redColor].CGColor;
//    imgView.layer.shadowOpacity = 1;

//3、添加按钮测试形变
UIButton *moveBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[moveBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[moveBtn setTitle:@"移动" forState:UIControlStateNormal];
[moveBtn setFrame:CGRectMake(0, 140, 40, 20)];
[moveBtn addTarget:self action:@selector(moveImgView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:moveBtn];

//4、添加X方向旋转按钮
UIButton *rotationBtnX = [UIButton buttonWithType:UIButtonTypeCustom];
[rotationBtnX setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[rotationBtnX setTitle:@"X旋转" forState:UIControlStateNormal];
[rotationBtnX setFrame:CGRectMake(40, 140, 50, 20)];
[rotationBtnX addTarget:self action:@selector(rotationXImgView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:rotationBtnX];

//5、添加Y方向旋转按钮
UIButton *rotationBtnY = [UIButton buttonWithType:UIButtonTypeCustom];
[rotationBtnY setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[rotationBtnY setTitle:@"Y旋转" forState:UIControlStateNormal];
[rotationBtnY setFrame:CGRectMake(90, 140, 50, 20)];
[rotationBtnY addTarget:self action:@selector(rotationYImgView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:rotationBtnY];

//6、添加Z方向旋转按钮
UIButton *rotationBtnZ = [UIButton buttonWithType:UIButtonTypeCustom];
[rotationBtnZ setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[rotationBtnZ setTitle:@"Z旋转" forState:UIControlStateNormal];
[rotationBtnZ setFrame:CGRectMake(140, 140, 50, 20)];
[rotationBtnZ addTarget:self action:@selector(rotationZImgView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:rotationBtnZ];

//7、添加缩放按钮
UIButton *scaleBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[scaleBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[scaleBtn setTitle:@"缩放" forState:UIControlStateNormal];
[scaleBtn setFrame:CGRectMake(190, 140, 50, 20)];
[scaleBtn addTarget:self action:@selector(scaleImgView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:scaleBtn];

///////// 动画演示 、、、、、、、、
//0、增加一个UIImageView
UIImageView *imgView2 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 180, 100, 100)];
imgView2.image = [UIImage imageNamed:@"first"];
[self.view addSubview:imgView2];
imgView2.layer.cornerRadius = 50; //等于50刚好裁剪一个圆；小雨50为圆角方形；大于50变形
imgView2.layer.masksToBounds = YES; //现实裁剪
imgView2.layer.borderWidth = 5;
imgView2.layer.borderColor = [UIColor redColor].CGColor;
imgView2.layer.shadowRadius = 5;
imgView2.userInteractionEnabled = YES; //增加交互
self.imgView2 = imgView2;

//1、动画缩放默认还原
UIButton *scaleAniBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[scaleAniBtn setTitle:@"动画缩放" forState:UIControlStateNormal];
[scaleAniBtn setFrame:CGRectMake(240, 140, 80, 20)];
[scaleAniBtn addTarget:self action:@selector(ainimationScale) forControlEvents:UIControlEventTouchUpInside];
[scaleAniBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[self.view addSubview:scaleAniBtn];

//2、动画缩放后不还原
UIButton *scaleAniBtnNoRevert = [UIButton buttonWithType:UIButtonTypeCustom];
[scaleAniBtnNoRevert setTitle:@"动画缩放后不还原" forState:UIControlStateNormal];
[scaleAniBtnNoRevert setFrame:CGRectMake(0, 160, 120, 20)];
[scaleAniBtnNoRevert.titleLabel setFont:[UIFont systemFontOfSize:13]];
[scaleAniBtnNoRevert addTarget:self action:@selector(ainimationScaleNoRevert:) forControlEvents:UIControlEventTouchUpInside];
[scaleAniBtnNoRevert setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[self.view addSubview:scaleAniBtnNoRevert];

//3、增加动画移动
UIButton *moveAniBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[moveAniBtn setTitle:@"动画移动" forState:UIControlStateNormal];
[moveAniBtn setFrame:CGRectMake(120, 160, 60, 20)];
[moveAniBtn.titleLabel setFont:[UIFont systemFontOfSize:13]];
[moveAniBtn addTarget:self action:@selector(animationMoveTransation:) forControlEvents:UIControlEventTouchUpInside];
[moveAniBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[self.view addSubview:moveAniBtn];

//4、动画集合
UIButton *mulAniBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[mulAniBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[mulAniBtn setTitle:@"动画集" forState:UIControlStateNormal];
[mulAniBtn addTarget:self action:@selector(animationKeyframe) forControlEvents:UIControlEventTouchUpInside];
[mulAniBtn setFrame:CGRectMake(180, 160, 60, 20)];
[self.view addSubview:mulAniBtn];

//5、动画集合2 ，使用UIBearPath
UIButton *mulAniBtn2 = [UIButton buttonWithType:UIButtonTypeCustom];
[mulAniBtn2 setTitle:@"动画集2" forState:UIControlStateNormal];
[mulAniBtn2 setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[mulAniBtn2 addTarget:self action:@selector(animationKeyframe2) forControlEvents:UIControlEventTouchUpInside];
[mulAniBtn2 setFrame:CGRectMake(240, 160, 80, 20)];
[self.view addSubview:mulAniBtn2];

//6、长按抖动，动画集合3
UILongPressGestureRecognizer *gesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(animationKeyframe3:)];
[self.imgView2 addGestureRecognizer:gesture]; //给imgView2增加长按手势
//7、第三行按钮: 取消抖动
UIButton *cancelDou = [UIButton buttonWithType:UIButtonTypeCustom];
[cancelDou setTitle:@"取消抖动" forState:UIControlStateNormal];
[cancelDou setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[cancelDou setFrame:CGRectMake(0, 280, 80, 20)];
[cancelDou addTarget:self action:@selector(removeAnimation) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:cancelDou];

//8、转场动画
UIButton *trasitionBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[trasitionBtn setTitle:@"转场动画" forState:UIControlStateNormal];
[trasitionBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[trasitionBtn addTarget:self action:@selector(trasactionAnimation) forControlEvents:UIControlEventTouchUpInside];
[trasitionBtn setFrame:CGRectMake(80, 280, 80, 20)];
[self.view addSubview:trasitionBtn];

//9、动画组
UIButton *groupAniBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[groupAniBtn setTitle:@"动画组" forState:UIControlStateNormal];
[groupAniBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[groupAniBtn addTarget:self action:@selector(animationGroup) forControlEvents:UIControlEventTouchUpInside];
[groupAniBtn setFrame:CGRectMake(160, 280, 80, 20)];
[self.view addSubview:groupAniBtn];
}

//移动UIImageView
- (void)moveImgView:(UIButton *)sender{
[UIView animateWithDuration:1 animations:^{
if (sender.tag == 0){
self.imgView.layer.transform = CATransform3DMakeTranslation(-250, 400, 0);
sender.tag = 1;
}else{
sender.tag = 0;
self.imgView.layer.transform = CATransform3DTranslate(self.imgView.layer.transform, 250, -400, 0);
}
}];
}

//X旋转UIImageView
- (void)rotationXImgView:(UIButton *)sender{
[UIView animateWithDuration:1 animations:^{
self.imgView.layer.transform = CATransform3DRotate(self.imgView.layer.transform, M_PI, 1, 0, 0);
}];
}
//Y旋转UIImageView
- (void)rotationYImgView:(UIButton *)sender{
[UIView animateWithDuration:1.0 animations:^{
self.imgView.layer.transform = CATransform3DRotate(self.imgView.layer.transform, M_PI, 0, 1, 0);
}];
}
//Z旋转UIImageView
- (void)rotationZImgView:(UIButton *)sender{
[UIView animateWithDuration:1.0 animations:^{
self.imgView.layer.transform = CATransform3DRotate(self.imgView.layer.transform, M_PI, 0, 0, 1);
}];
}

//缩放
- (void)scaleImgView:(UIButton *)sender{
[UIView animateWithDuration:1 animations:^{
if (sender.tag == 0){
self.imgView2.layer.transform = CATransform3DMakeScale(0.5, 0.5, 0.0);
sender.tag = 1;
}else{
sender.tag = 0;
self.imgView2.layer.transform = CATransform3DMakeScale(1.0, 1.0, 0.0);
}
}];
}

//动画缩放
- (void)ainimationScale{
CABasicAnimation *basicAni = [CABasicAnimation animation];
basicAni.keyPath = @"transform.scale";
basicAni.toValue = @0.1;
basicAni.duration = 2;
[self.imgView2.layer addAnimation:basicAni forKey:nil];
}

//动画缩放不还原
- (void)ainimationScaleNoRevert:(UIButton *)sender{
CABasicAnimation *basicAni = [CABasicAnimation animation];
basicAni.keyPath = @"transform.scale";

if (sender.tag == 0){
basicAni.toValue = @1.5;
sender.tag = 1;
}else{
basicAni.toValue = @0.5;
sender.tag = 0;
}
basicAni.duration = 2;
//fillMode和removeOnCompletion两个属性都需要设置才能不还原
basicAni.fillMode = kCAFillModeForwards; //默认填充模式为一直向前
basicAni.removedOnCompletion = NO; //完成动画后不移除动画
[self.imgView2.layer addAnimation:basicAni forKey:nil];
}

//动画位置移动
- (void)animationMoveTransation:(UIButton *)sender{
CABasicAnimation *basicAni = [CABasicAnimation animation];
basicAni.keyPath = @"position";

if (sender.tag == 0){
basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 450)];
sender.tag = 1;
}else{
basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 230)];
sender.tag = 0;
}
basicAni.duration = 2;
//fillMode和removeOnCompletion两个属性都需要设置才能不还原
basicAni.fillMode = kCAFillModeForwards; //默认填充模式为一直向前
basicAni.removedOnCompletion = NO; //完成动画后不移除动画
[self.imgView2.layer addAnimation:basicAni forKey:nil];
}

//动画集合，测试CAKeyframeAnimation
- (void)animationKeyframe{
CAKeyframeAnimation *keyAni = [CAKeyframeAnimation animation];
NSValue *val1 = [NSValue valueWithCGPoint:CGPointMake(10, 10)];
NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(300, 10)];
NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];
NSValue *val4 = [NSValue valueWithCGPoint:CGPointMake(10, 400)];
keyAni.values = @[val1, val2, val3, val4];
keyAni.keyPath = @"position";
keyAni.duration = 2;
[self.imgView2.layer addAnimation:keyAni forKey:nil];
}
//测试UIBezierPath动画集合
- (void)animationKeyframe2{
CAKeyframeAnimation *keyAni = [CAKeyframeAnimation animation];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 220, 400)];
keyAni.path = path.CGPath;
keyAni.duration = 2;
keyAni.keyPath = @"position";
[self.imgView2.layer addAnimation:keyAni forKey:nil];
}
//动画集合3，长按抖动
- (void)animationKeyframe3: (UILongPressGestureRecognizer *)sender{
if (sender.state == UIGestureRecognizerStateBegan){
CAKeyframeAnimation *keyAni = [CAKeyframeAnimation animation];
keyAni.keyPath = @"transform.rotation";
keyAni.values = @[@(-M_PI_4 * 0.6), @(0), @(M_PI_4 * 0.6), @(0), @(-M_PI_4 * 0.6)];
keyAni.repeatCount = MAXFLOAT;
keyAni.duration = 0.2;
[self.imgView2.layer addAnimation:keyAni forKey:nil];
}
}

//取消抖动动画
- (void)removeAnimation{
[self.imgView2.layer removeAllAnimations];
}

//转场动画
- (void)trasactionAnimation{
_index++;
if (_index > 3){
_index = 0;
}

CATransition *tra = [CATransition animation];
tra.subtype = @"fromLeft";
tra.type = @"push"; //push推送(把前一个推走)； moveIn移进去(慢慢覆盖前一个), fade:慢慢消失，默认;  reveal:离开
tra.duration = 0.5;
self.imgView2.image = [UIImage imageNamed:[NSString stringWithFormat:@"%i", _index]];

[self.imgView2.layer addAnimation:tra forKey:nil];
}

//动画组
- (void)animationGroup{
CABasicAnimation *rotation = [CABasicAnimation animation];
rotation.keyPath = @"transform.rotation";
rotation.toValue = @M_PI;//[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 0, 0)];

CABasicAnimation *scale = [CABasicAnimation animation];
scale.keyPath = @"transform.scale";
scale.toValue = @3;//[NSValue valueWithCATransform3D:CATransform3DMakeScale(3, 3, 1)];

CABasicAnimation *position = [CABasicAnimation animation];
position.keyPath = @"position";
position.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 450)];

CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[scale, position, rotation];
group.duration = 1;
//    group.removedOnCompletion = NO;
//    group.fillMode = kCAFillModeForwards;
[self.imgView2.layer addAnimation:group forKey:nil];
}

//增加上一页按钮
- (void)addPreBtn{
UIButton *preBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 20, 60, 20)];
[preBtn setTitle:@"上一页" forState:UIControlStateNormal];
[preBtn setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
[preBtn addTarget:self action:@selector(previousPage) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:preBtn];
}

//上一页
- (void)previousPage{
[self dismissViewControllerAnimated:YES completion:nil];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/

@end

View Code