[iOS UI进阶 - 6.2] 核心动画CoreAnimation 练习代码

A.基本用法

1.CABasicAnimation

  1 //
  2 //  ViewController.m
  3 //  CoreAnimationTest
  4 //
  5 //  Created by hellovoidworld on 15/1/14.
  6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
  7 //
  8
  9 #import "ViewController.h"
 10
 11 @interface ViewController ()
 12
 13 @property(nonatomic, strong) CALayer *layer;
 14
 15 @end
 16
 17 @implementation ViewController
 18
 19 - (void)viewDidLoad {
 20     [super viewDidLoad];
 21     // Do any additional setup after loading the view, typically from a nib.
 22
 23
 24     CALayer *layer = [[CALayer alloc] init];
 25     layer.bounds = CGRectMake(0, 0, 100, 100);
 26     layer.anchorPoint = CGPointZero;
 27     layer.position = CGPointMake(100, 200);
 28     layer.backgroundColor = [UIColor redColor].CGColor;
 29
 30     [self.view.layer addSublayer:layer];
 31
 32     self.layer = layer;
 33 }
 34
 35 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 36 //    [self testTransform];
 37
 38 //    [self testRotation];
 39
 40 //    [self testScale];
 41
 42     [self testTranslate];
 43 }
 44
 45 /** 测试位移转换 */
 46 - (void) testTransform {
 47     // 1.创建动画对象
 48     CABasicAnimation *anim = [CABasicAnimation animation];
 49
 50     // 2.设置动画
 51     anim.duration = 2.0;
 52     // 动画设置目标属性
 53     anim.keyPath = @"transform.translation.x";
 54     // 目标属性值
 55     anim.toValue = @(150);
 56
 57     // 完成后保留动画
 58     anim.removedOnCompletion = NO;
 59     // 定格动画模式为最后一刻
 60     anim.fillMode = kCAFillModeForwards;
 61
 62     // 3.添加动画到图层
 63     [self.layer addAnimation:anim forKey:nil];
 64 }
 65
 66 /** 测试旋转 */
 67 - (void) testRotation {
 68     // 1.创建动画对象
 69     CABasicAnimation *anim = [CABasicAnimation animation];
 70
 71     // 2.设置动画
 72     anim.duration = 2.0;
 73
 74     // 动画设置目标属性
 75 //    anim.keyPath = @"transform.rotation";
 76     anim.keyPath = @"transform";
 77     NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)];
 78
 79     // 目标属性值
 80 //    anim.toValue = @(M_PI_2);
 81     anim.toValue = value;
 82
 83
 84     // 完成后保留动画
 85     anim.removedOnCompletion = NO;
 86     // 定格动画模式为最后一刻
 87     anim.fillMode = kCAFillModeForwards;
 88
 89     // 3.添加动画到图层
 90     [self.layer addAnimation:anim forKey:nil];
 91 }
 92
 93 /** 测试缩放 */
 94 - (void) testScale {
 95     // 1.创建动画对象
 96     CABasicAnimation *anim = [CABasicAnimation animation];
 97
 98     // 2.设置动画
 99     anim.duration = 2.0;
100     // 动画设置目标属性
101     anim.keyPath = @"bounds";
102
103     // 由于属性是bounds，所以x,y属性是无用的，并且要使用CGRect
104     NSValue *fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 0, 0)];
105     NSValue *toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
106
107     // 目标属性值
108     anim.fromValue = fromValue;
109     anim.toValue = toValue;
110
111     // 完成后保留动画
112     anim.removedOnCompletion = NO;
113     // 定格动画模式为最后一刻
114     anim.fillMode = kCAFillModeForwards;
115
116     // 3.添加动画到图层
117     [self.layer addAnimation:anim forKey:nil];
118 }
119
120 - (void) testTranslate {
121     // 1.创建动画对象
122     CABasicAnimation *anim = [CABasicAnimation animation];
123
124     // 2.设置动画
125     anim.duration = 2.0;
126     // 动画设置目标属性
127     anim.keyPath = @"position";
128
129     // 目标属性值
130     NSValue *value = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
131     // 增减目标属性值，所以一直点击就会一直移动下去
132     anim.byValue = value;
133
134     // 完成后保留动画
135     anim.removedOnCompletion = NO;
136     // 定格动画模式为最后一刻
137     anim.fillMode = kCAFillModeForwards;
138
139     // 3.添加动画到图层
140     [self.layer addAnimation:anim forKey:nil];
141 }
142
143
144 - (void)didReceiveMemoryWarning {
145     [super didReceiveMemoryWarning];
146     // Dispose of any resources that can be recreated.
147 }
148
149 @end

 

2.CAKeyframeAnimation

 

  1 //
  2 //  KeyframeViewController.m
  3 //  CoreAnimationTest
  4 //
  5 //  Created by hellovoidworld on 15/1/15.
  6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
  7 //
  8
  9 #import "KeyframeViewController.h"
 10
 11 @interface KeyframeViewController ()
 12
 13 @property(nonatomic, strong) CALayer *layer;
 14
 15 @end
 16
 17 @implementation KeyframeViewController
 18
 19 - (void)viewDidLoad {
 20     [super viewDidLoad];
 21     // Do any additional setup after loading the view.
 22
 23     CALayer *layer = [[CALayer alloc] init];
 24     layer.bounds = CGRectMake(0, 0, 100, 100);
 25     layer.anchorPoint = CGPointZero;
 26     layer.position = CGPointMake(200, 100);
 27     layer.backgroundColor = [UIColor redColor].CGColor;
 28
 29     [self.view.layer addSublayer:layer];
 30
 31     self.layer = layer;
 32 }
 33
 34 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 35 //    [self testPath];
 36
 37     [self testMutiValue];
 38 }
 39
 40 - (void) testPath {
 41     // 创建动画对象
 42     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
 43
 44     // 设置动画
 45     anim.keyPath = @"position";
 46     anim.removedOnCompletion = NO;
 47     anim.fillMode = kCAFillModeForwards;
 48     anim.duration = 2.0;
 49
 50     // 设置绘画路径
 51     CGMutablePathRef path = CGPathCreateMutable();
 52     // 创建一个圆的轨迹
 53     CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 200, 200));
 54     // 设置动画轨迹
 55     anim.path = path;
 56     // 释放路径
 57     CGPathRelease(path);
 58
 59     // 设置动画代理
 60     anim.delegate = self;
 61
 62     [self.layer addAnimation:anim forKey:nil];
 63 }
 64
 65 - (void) testMutiValue {
 66     // 创建动画对象
 67     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
 68
 69     // 设置动画
 70     anim.keyPath = @"position";
 71     anim.removedOnCompletion = NO;
 72     anim.fillMode = kCAFillModeForwards;
 73     anim.duration = 2.0;
 74
 75     NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
 76     NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
 77     NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(300, 200)];
 78     NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(120, 50)];
 79
 80     anim.values = @[v1, v2, v3, v4];
 81
 82     //  设置动画节奏
 83     // 慢进慢出
 84     anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 85
 86     // 设置动画代理
 87     anim.delegate = self;
 88
 89     [self.layer addAnimation:anim forKey:nil];
 90 }
 91
 92 #pragma mark - 动画代理方法
 93 /** 动画开始之后 */
 94 - (void)animationDidStart:(CAAnimation *)anim {
 95     NSLog(@"animationDidStart");
 96 }
 97
 98 /** 动画结束 */
 99 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
100     NSLog(@"animationDidStop");
101 }
102
103
104 @end

 

3.控件抖动

 

 1 //
 2 //  ShakeViewController.m
 3 //  CoreAnimationTest
 4 //
 5 //  Created by hellovoidworld on 15/1/15.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8
 9 #import "ShakeViewController.h"
10
11 @interface ShakeViewController ()
12
13 @property(nonatomic, strong) UIImageView *imageView;
14
15 @end
16
17 @implementation ShakeViewController
18
19 - (void)viewDidLoad {
20     [super viewDidLoad];
21     // Do any additional setup after loading the view.
22
23     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"headImage"]];
24     imageView.frame = CGRectMake(100, 100, 100, 100);
25     self.imageView = imageView;
26
27     UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];
28     [startButton setTitle:@"开始" forState:UIControlStateNormal];
29     startButton.frame = CGRectMake(50, 50, 40, 50);
30     [startButton addTarget:self action:@selector(startShake) forControlEvents:UIControlEventTouchUpInside];
31
32     UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];
33     [stopButton setTitle:@"停止" forState:UIControlStateNormal];
34     stopButton.frame = CGRectMake(150, 50, 40, 50);
35     [stopButton addTarget:self action:@selector(stopShake) forControlEvents:UIControlEventTouchUpInside];
36
37     [self.view addSubview:imageView];
38     [self.view addSubview:startButton];
39     [self.view addSubview:stopButton];
40 }
41
42 /** 开始摆动 */
43 - (void) startShake {
44     NSLog(@"start shake");
45
46     // 创建动画
47     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
48     anim.keyPath = @"transform.rotation";
49     anim.repeatCount = MAXFLOAT;
50     anim.duration = 0.2;
51
52     // 设置摇摆
53     anim.values = @[@(- (M_PI/180 * 5)), @((M_PI/180 * 5)), @(- (M_PI/180 * 5))];
54
55     // 定格动画
56     anim.removedOnCompletion = NO;
57     anim.fillMode = kCAFillModeForwards;
58
59     // 给view加上动画
60     [self.imageView.layer addAnimation:anim forKey:@"shake"];
61 }
62
63 /** 停止摆动 */
64 - (void) stopShake {
65     NSLog(@"stop shake");
66
67     [self.imageView.layer removeAnimationForKey:@"shake"];
68 }
69
70 @end

 

4.过渡效果

 

 1 //
 2 //  TransitionViewController.m
 3 //  CoreAnimationTest
 4 //
 5 //  Created by hellovoidworld on 15/1/15.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8
 9 #import "TransitionViewController.h"
10
11 @interface TransitionViewController ()
12
13 @property(nonatomic, strong) UIImageView *imageView;
14
15 @property(nonatomic, assign) int imageIndex;
16
17 @end
18
19 @implementation TransitionViewController
20
21 - (void)viewDidLoad {
22     [super viewDidLoad];
23     // Do any additional setup after loading the view.
24
25     self.imageIndex = 0;
26     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
27     imageView.frame = CGRectMake(80, 50, 160, 240);
28     self.imageView = imageView;
29
30     UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];
31     [startButton setTitle:@"上一张" forState:UIControlStateNormal];
32     startButton.frame = CGRectMake(50, 400, 80, 50);
33     [startButton addTarget:self action:@selector(preImage) forControlEvents:UIControlEventTouchUpInside];
34
35     UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];
36     [stopButton setTitle:@"下一张" forState:UIControlStateNormal];
37     stopButton.frame = CGRectMake(150, 400, 80, 50);
38     [stopButton addTarget:self action:@selector(nextImage) forControlEvents:UIControlEventTouchUpInside];
39
40     [self.view addSubview:imageView];
41     [self.view addSubview:startButton];
42     [self.view addSubview:stopButton];
43 }
44
45 /** 上一张 */
46 - (void) preImage {
47     NSLog(@"preImage");
48
49     self.imageIndex--;
50     if (self.imageIndex == -1) {
51         self.imageIndex = 8;
52     }
53
54     CATransition *anim = [[CATransition alloc] init];
55     anim.duration = 0.5;
56     anim.type = @"cube";
57     anim.subtype = kCATransitionFromLeft;
58
59     [self.imageView.layer addAnimation:anim forKey:nil];
60
61     [self changeImage:self.imageIndex];
62 }
63
64 /** 下一张 */
65 - (void) nextImage {
66     NSLog(@"nextImage");
67
68     self.imageIndex++;
69     if (self.imageIndex == 9) {
70         self.imageIndex = 0;
71     }
72
73     CATransition *anim = [[CATransition alloc] init];
74     anim.duration = 0.5;
75     anim.type = @"cube";
76     anim.subtype = kCATransitionFromRight;
77
78     [self.imageView.layer addAnimation:anim forKey:nil];
79
80     [self changeImage:self.imageIndex];
81 }
82
83 /** 替换图片 */
84 - (void) changeImage:(int) imageIndex {
85     NSString *imageName = [NSString stringWithFormat:@"%d", self.imageIndex + 1];
86     self.imageView.image = [UIImage imageNamed:imageName];
87 }
88
89 @end

 

5.CAAnimationGroup 动画组（组合多种动画）

 

 1 //
 2 //  GroupViewController.m
 3 //  CoreAnimationTest
 4 //
 5 //  Created by hellovoidworld on 15/1/15.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8
 9 #import "GroupViewController.h"
10
11 @interface GroupViewController ()
12
13 @property(nonatomic, strong) UIView *hvwView;
14
15 @end
16
17 @implementation GroupViewController
18
19 - (void)viewDidLoad {
20     [super viewDidLoad];
21     // Do any additional setup after loading the view.
22
23     UIView *hvwView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
24     hvwView.backgroundColor = [UIColor redColor];
25     self.hvwView = hvwView;
26
27     [self.view addSubview:hvwView];
28 }
29
30 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
31     // 平移
32     CABasicAnimation *anim1 = [[CABasicAnimation alloc] init];
33     anim1.keyPath = @"position";
34     anim1.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
35
36     // 旋转
37     CABasicAnimation *anim2 = [[CABasicAnimation alloc] init];
38     anim2.keyPath = @"transform.rotation";
39     anim2.toValue = @(M_PI_2);
40
41     // 缩放
42     CABasicAnimation *anim3 = [[CABasicAnimation alloc] init];
43     anim3.keyPath = @"bounds";
44     anim3.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
45
46     // group动画
47     CAAnimationGroup *animGroup = [[CAAnimationGroup alloc] init];
48     animGroup.animations = @[anim1, anim2, anim3];
49     animGroup.duration = 2.0;
50
51     // 定格动画
52     animGroup.removedOnCompletion = NO;
53     animGroup.fillMode = kCAFillModeForwards;
54
55     [self.hvwView.layer addAnimation:animGroup forKey:nil];
56 }
57
58 @end