502-UIView的动画

一、简介

1.图层动画与UIView自己封装的动画

　　相对于UIView自己封装的动画，图层动画存在一定的缺点：

　　　　1）回弹(因为图层的属性都不会改变，所以在动画结束后会遵照原始的图层属性显示)

　　　　2）你所看到的动画都是假象，它的图层属性其实都没有变(如：position、bounds)

　　　　所以即使我们设置图层动画属性不会弹，那也只是强制性的操作，其实图层的属性还是原来的

　　那么，在实际开发中，除非是转场动画，其他动画都不用图层动画，都是在使用我们UIView自己封装的动画。

2.UIView中可以动画改变的几个属性

3.UIView动画中的枚举属性值(options)

二、UIView动画的执行方式

1.block代码块

1）这个是参数最少的一个方法，我们可以通过设置一个时间和block块来完成动画，时间参数是动画执行的时长，block块中为要执行的动画动作

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations;

2）这个函数会带两个block块，用法和第一个函数相似，设置一个执行时间和一个执行动作，第二个block块中可以添加一个动画执行结束后的动作，作为补充

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;

3）这个函数除了上面的属性外，可以设置延时执行，同时可以设置一个动画效果参数，这个参数是个枚举，它可以影响动画的执行效果

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOLfinished))completion;

4）这个函数是iOS7之后的一个新函数，通过这个函数，我们可以方便的制作出效果炫酷的动画，这个函数的核心是两个阻尼参数，参数dampingRatio可以理解为弹簧效果的强弱，设置1则没有回弹效果，设置0则会剧烈的阻尼回弹。velocity参数用于设置弹簧的初始速度

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOLfinished))completion;

5）通过这个方法，我们可以重绘View视图，任何其子视图的改变或者其自身的改变都会触发转场动画的效果

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOLfinished))completion;

6）这个方法会作用于fromView的父视图，用于切换两个view，通过执行这个方法，会将formView从其父视图上移除，将toView重新粘在其父视图上，展现一个动画效果

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

注意：

1）属性可以使用|进行多项合并

2）在第5个和第6个方法的转场动画中，比如如果需要改变某个View的颜色，它会在转场动画结束后突然间改变，显得有限突兀，所以这个时候options参数中必须包含UIViewAnimationOptionAllowAnimatedContent这个枚举

2.UIView动画执行的另一种方式

1）设置开始动画

这个函数中的两个参数，第一个用于设置一个动画的标识id，通常第二个参数写为nil

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;

2）动画执行的参数设置

①设置这个动画的代理，用于执行动画开始或者结束后的动作

+ (void)setAnimationDelegate:(id)delegate;

②设置动画开始时执行的回调

+ (void)setAnimationWillStartSelector:(SEL)selector;

③设置动画结束后执行的回调

+ (void)setAnimationDidStopSelector:(SEL)selector;

④设置动画执行的时间

+ (void)setAnimationDuration:(NSTimeInterval)duration;

⑤设置延时执行的延时

+ (void)setAnimationDelay:(NSTimeInterval)delay;

⑥给动画设置一个起始时间

+ (void)setAnimationStartDate:(NSDate *)startDate;

⑦设置动画播放的线性效果，UIViewAnimationCurve的枚举如下

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;

⑧设置动画循环播放次数

+ (void)setAnimationRepeatCount:(float)repeatCount;

⑨设置动画逆向执行

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;

3）提交动画

+ (void)commitAnimations

例如：

1 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
2 view.backgroundColor=[UIColor redColor];
3 [self.view addSubview:view];
4 
5 [UIView beginAnimations:@"test" context:nil];
6 [UIView setAnimationDuration:3];
7 view.backgroundColor=[UIColor orangeColor];
8 [UIView commitAnimations]; // 执行commit后，动画即开始执行

三、代码实例

1. 平移动画

 1 #import "PositionController.h"
 2 
 3 @interface PositionController ()
 4 
 5 @end
 6 
 7 @implementation PositionController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12 
13     [self initUI]; // 界面
14 }
15 
16 #pragma mark - 界面
17 - (void)initUI
18 {
19     self.view.backgroundColor = [UIColor whiteColor];
20     
21     // view
22     CGFloat viewY = 150;
23     CGFloat viewW = 100;
24     CGFloat viewH = 100;
25     NSArray *colors = @[[UIColor redColor], [UIColor blueColor], [UIColor yellowColor]];
26     for (int i = 0; i < 3; i++) {
27         CGFloat viewX = self.view.bounds.size.width / 6.0 * ((i + 1) * 2 - 1);
28         UIView *view = [[UIView alloc] init];
29         view.center = CGPointMake(viewX, viewY);
30         view.bounds = CGRectMake(0, 0, viewW, viewH);
31         view.backgroundColor = colors[i];
32         view.tag = 100 + i;
33         [self.view addSubview:view];
34     }
35     
36     // btn1
37     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
38     btn1.frame = CGRectMake(20, 400, self.view.bounds.size.width - 20 * 2, 50);
39     [btn1 setTitle:@"动画同时触发" forState:UIControlStateNormal];
40     btn1.backgroundColor = [UIColor greenColor];
41     btn1.tintColor = [UIColor whiteColor];
42     btn1.titleLabel.font = [UIFont boldSystemFontOfSize:18];
43     btn1.layer.cornerRadius = 4;
44     btn1.layer.masksToBounds = YES;
45     [btn1 addTarget:self action:@selector(btnOneClick:) forControlEvents:UIControlEventTouchUpInside];
46     [self.view addSubview:btn1];
47     
48     // btn2
49     UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
50     btn2.frame = CGRectMake(20, 470, self.view.bounds.size.width - 20 * 2, 50);
51     [btn2 setTitle:@"动画非同时触发" forState:UIControlStateNormal];
52     btn2.backgroundColor = [UIColor greenColor];
53     btn2.tintColor = [UIColor whiteColor];
54     btn2.titleLabel.font = [UIFont boldSystemFontOfSize:18];
55     btn2.layer.cornerRadius = 4;
56     btn2.layer.masksToBounds = YES;
57     [btn2 addTarget:self action:@selector(btnTwoClick:) forControlEvents:UIControlEventTouchUpInside];
58     [self.view addSubview:btn2];
59 }
60 
61 #pragma mark - 点击事件
62 // 1.动画同时触发
63 - (void)btnOneClick:(UIButton *)sender
64 {
65     // 同时动画
66     [UIView animateWithDuration:1 animations:^{
67         UIView *redView = [self.view viewWithTag:100];
68         UIView *blueView = [self.view viewWithTag:101];
69         UIView *yellowView = [self.view viewWithTag:102];
70         redView.center = CGPointMake(self.view.bounds.size.width - redView.center.x, redView.center.y);
71         blueView.center = CGPointMake(blueView.center.x, self.view.bounds.size.height - blueView.center.y);
72         yellowView.center = CGPointMake(self.view.bounds.size.width - yellowView.center.x, self.view.bounds.size.height - yellowView.center.y);
73     }];
74 }
75 // 2.动画非同时触发
76 - (void)btnTwoClick:(UIButton *)sender
77 {
78     // 第一步执行红色动画
79     [UIView animateWithDuration:1 animations:^{
80         UIView *redView = [self.view viewWithTag:100];
81         redView.center = CGPointMake(self.view.bounds.size.width - redView.center.x, redView.center.y);
82     }];
83     // 第二步执行蓝色动画
84     [UIView animateWithDuration:1 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
85         UIView *blueView = [self.view viewWithTag:101];
86         blueView.center = CGPointMake(blueView.center.x, self.view.bounds.size.height - blueView.center.y);
87     } completion:^(BOOL finished) {
88         // 第三步执行黄色动画
89         [UIView animateWithDuration:1 animations:^{
90             UIView *yellowView = [self.view viewWithTag:102];
91             yellowView.center = CGPointMake(self.view.bounds.size.width - yellowView.center.x, self.view.bounds.size.height - yellowView.center.y);
92         }];
93     }];
94 }
95 
96 @end

2.透明度动画

 1 #import "OpacityController.h"
 2 
 3 @interface OpacityController ()
 4 
 5 @end
 6 
 7 @implementation OpacityController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     
13     [self initUI]; // 界面
14 }
15 
16 #pragma mark - 界面
17 - (void)initUI
18 {
19     self.view.backgroundColor = [UIColor whiteColor];
20     
21     // redView
22     CGFloat redViewX = self.view.bounds.size.width / 2.0;
23     CGFloat redViewY = 150;
24     CGFloat redViewW = 100;
25     CGFloat redViewH = 100;
26     UIView *redView = [[UIView alloc] init];
27     redView.center = CGPointMake(redViewX, redViewY);
28     redView.bounds = CGRectMake(0, 0, redViewW, redViewH);
29     redView.backgroundColor = [UIColor redColor];
30     redView.tag = 100;
31     [self.view addSubview:redView];
32     
33     // btn
34     UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
35     btn.frame = CGRectMake(20, 400, self.view.bounds.size.width - 20 * 2, 50);
36     [btn setTitle:@"动画" forState:UIControlStateNormal];
37     btn.backgroundColor = [UIColor greenColor];
38     btn.tintColor = [UIColor whiteColor];
39     btn.titleLabel.font = [UIFont boldSystemFontOfSize:18];
40     btn.layer.cornerRadius = 4;
41     btn.layer.masksToBounds = YES;
42     [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
43     [self.view addSubview:btn];
44 }
45 
46 #pragma mark - 点击事件
47 // 动画
48 - (void)btnClick:(UIButton *)sender
49 {
50     UIView *redView = [self.view viewWithTag:100];
51     [UIView animateWithDuration:1 animations:^{
52         redView.alpha = 0.1;
53     }];
54 }
55 
56 @end

3.缩放动画

 1 #import "ScaleController.h"
 2 
 3 @interface ScaleController ()
 4 
 5 @property (nonatomic, assign) BOOL isOriginal;
 6 
 7 @end
 8 
 9 @implementation ScaleController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14     
15     [self initUI]; // 界面
16 }
17 
18 #pragma mark - 界面
19 - (void)initUI
20 {
21     self.view.backgroundColor = [UIColor whiteColor];
22     
23     // redView
24     CGFloat redViewX = self.view.bounds.size.width / 2.0;
25     CGFloat redViewY = 240;
26     CGFloat redViewW = 300;
27     CGFloat redViewH = 300;
28     UIView *redView = [[UIView alloc] init];
29     redView.center = CGPointMake(redViewX, redViewY);
30     redView.bounds = CGRectMake(0, 0, redViewW, redViewH);
31     redView.backgroundColor = [UIColor redColor];
32     redView.tag = 100;
33     [self.view addSubview:redView];
34     
35     // btn1
36     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
37     btn1.frame = CGRectMake(20, 500, self.view.bounds.size.width - 20 * 2, 50);
38     [btn1 setTitle:@"动画1" forState:UIControlStateNormal];
39     btn1.backgroundColor = [UIColor greenColor];
40     btn1.tintColor = [UIColor whiteColor];
41     btn1.titleLabel.font = [UIFont boldSystemFontOfSize:18];
42     btn1.layer.cornerRadius = 4;
43     btn1.layer.masksToBounds = YES;
44     [btn1 addTarget:self action:@selector(btnOneClick:) forControlEvents:UIControlEventTouchUpInside];
45     [self.view addSubview:btn1];
46     
47     // btn2
48     UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
49     btn2.frame = CGRectMake(20, 570, self.view.bounds.size.width - 20 * 2, 50);
50     [btn2 setTitle:@"动画2" forState:UIControlStateNormal];
51     btn2.backgroundColor = [UIColor greenColor];
52     btn2.tintColor = [UIColor whiteColor];
53     btn2.titleLabel.font = [UIFont boldSystemFontOfSize:18];
54     btn2.layer.cornerRadius = 4;
55     btn2.layer.masksToBounds = YES;
56     [btn2 addTarget:self action:@selector(btnTwoClick:) forControlEvents:UIControlEventTouchUpInside];
57     [self.view addSubview:btn2];
58     
59     // 初始化设置
60     _isOriginal = YES;
61 }
62 
63 #pragma mark - 点击事件
64 // 动画1
65 - (void)btnOneClick:(UIButton *)sender
66 {
67     UIView *redView = [self.view viewWithTag:100];
68     if (_isOriginal) {
69         [UIView animateWithDuration:1 animations:^{
70             _isOriginal = NO;
71             // x轴缩小到0.2倍，y轴缩小到0.2倍
72             redView.transform = CGAffineTransformMakeScale(0.2, 0.2);
73         }];
74     } else {
75         [UIView animateWithDuration:1 animations:^{
76             _isOriginal = YES;
77             // x轴回到原始，y轴回到原始
78             redView.transform = CGAffineTransformMakeScale(1, 1);
79         }];
80     }
81 }
82 // 动画2
83 - (void)btnTwoClick:(UIButton *)sender
84 {
85     UIView *redView = [self.view viewWithTag:100];
86     [UIView animateWithDuration:1 animations:^{
87         // 这里可以获取最新的transform，所以可连续点击，连续缩放
88         redView.transform = CGAffineTransformScale(redView.transform, 0.8, 0.8);
89     }];
90 }
91 
92 @end

4.颜色动画

 1 #import "ColorController.h"
 2 
 3 @interface ColorController ()
 4 
 5 @end
 6 
 7 @implementation ColorController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     
13     [self initUI]; // 界面
14 }
15 
16 #pragma mark - 界面
17 - (void)initUI
18 {
19     self.view.backgroundColor = [UIColor whiteColor];
20     
21     // redView
22     CGFloat redViewX = self.view.bounds.size.width / 2.0;
23     CGFloat redViewY = 240;
24     CGFloat redViewW = 300;
25     CGFloat redViewH = 300;
26     UIView *redView = [[UIView alloc] init];
27     redView.center = CGPointMake(redViewX, redViewY);
28     redView.bounds = CGRectMake(0, 0, redViewW, redViewH);
29     redView.backgroundColor = [UIColor redColor];
30     redView.tag = 100;
31     [self.view addSubview:redView];
32     
33     // btn
34     UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
35     btn.frame = CGRectMake(20, 500, self.view.bounds.size.width - 20 * 2, 50);
36     [btn setTitle:@"动画" forState:UIControlStateNormal];
37     btn.backgroundColor = [UIColor greenColor];
38     btn.tintColor = [UIColor whiteColor];
39     btn.titleLabel.font = [UIFont boldSystemFontOfSize:18];
40     btn.layer.cornerRadius = 4;
41     btn.layer.masksToBounds = YES;
42     [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
43     [self.view addSubview:btn];
44 }
45 
46 #pragma mark - 点击事件
47 // 动画
48 - (void)btnClick:(UIButton *)sender
49 {
50     UIView *redView = [self.view viewWithTag:100];
51     [UIView animateWithDuration:5 animations:^{
52         redView.backgroundColor = [UIColor blackColor];
53     }];
54 }
55 
56 @end

5.翻转动画

 1 #import "RotationController.h"
 2 
 3 @interface RotationController ()
 4 
 5 @property (nonatomic, assign) BOOL isRotate;
 6 @property (nonatomic, strong) NSTimer *timer;
 7 
 8 @end
 9 
10 @implementation RotationController
11 
12 - (void)viewDidLoad
13 {
14     [super viewDidLoad];
15     
16     [self initUI]; // 界面
17 }
18 
19 #pragma mark - 界面
20 - (void)initUI
21 {
22     self.view.backgroundColor = [UIColor whiteColor];
23     
24     // imageView
25     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
26     imageView.userInteractionEnabled = YES;
27     imageView.tag = 100;
28     imageView.center = CGPointMake(self.view.bounds.size.width / 2.0, 250);
29     [self.view addSubview:imageView];
30     
31     // btn1
32     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
33     btn1.bounds = CGRectMake(0, 0, 100, 50);
34     btn1.center = CGPointMake(imageView.center.x - 80, CGRectGetMaxY(imageView.frame) + 50);
35     [btn1 setTitle:@"抽奖1" forState:UIControlStateNormal];
36     btn1.backgroundColor = [UIColor greenColor];
37     btn1.tintColor = [UIColor whiteColor];
38     btn1.titleLabel.font = [UIFont boldSystemFontOfSize:18];
39     btn1.layer.cornerRadius = 4;
40     btn1.layer.masksToBounds = YES;
41     [btn1 addTarget:self action:@selector(btnOneClick:) forControlEvents:UIControlEventTouchUpInside];
42     [self.view addSubview:btn1];
43     
44     // btn
45     UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
46     btn2.bounds = CGRectMake(0, 0, 100, 50);
47     btn2.center = CGPointMake(imageView.center.x + 80, CGRectGetMaxY(imageView.frame) + 50);
48     [btn2 setTitle:@"抽奖2" forState:UIControlStateNormal];
49     btn2.backgroundColor = [UIColor greenColor];
50     btn2.tintColor = [UIColor whiteColor];
51     btn2.titleLabel.font = [UIFont boldSystemFontOfSize:18];
52     btn2.layer.cornerRadius = 4;
53     btn2.layer.masksToBounds = YES;
54     [btn2 addTarget:self action:@selector(btnTwoClick:) forControlEvents:UIControlEventTouchUpInside];
55     [self.view addSubview:btn2];
56 }
57 
58 #pragma mark - 点击事件
59 // 动画1
60 - (void)btnOneClick:(UIButton *)sender
61 {
62     UIImageView *imageView = [self.view viewWithTag:100];
63     [UIView animateWithDuration:5 animations:^{
64         // 始终拿到最新的transform，只要点击就会在原有的基础上去旋转
65         imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
66         // 始终拿到原始的transform，连续点击无效
67         // imageView.transform = CGAffineTransformMakeRotation(M_PI);
68     }];
69 }
70 // 动画2
71 - (void)btnTwoClick:(UIButton *)sender
72 {
73     if (_isRotate) {
74         _isRotate = NO;
75         [_timer invalidate];
76         _timer = nil;
77     } else {
78         _isRotate = YES;
79         _timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(rotate) userInfo:nil repeats:YES];
80     }
81 }
82 
83 #pragma mark - 转动函数
84 - (void)rotate
85 {
86     UIImageView *imageView = [self.view viewWithTag:100];
87     // UIViewAnimationOptionCurveLinear线性速度
88     [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
89         imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
90     } completion:nil];
91 }
92 
93 @end

6.动画时机

 1 #import "TimingController.h"
 2 
 3 @interface TimingController ()
 4 
 5 // 动画时机
 6 // 1.各属性的原始状态
 7 // 2.各属性的结束状态
 8 // 3.执行时长
 9 // 4.执行过程
10 // 5.执行完毕后的处理
11 
12 @end
13 
14 @implementation TimingController
15 
16 - (void)viewDidLoad
17 {
18     [super viewDidLoad];
19     
20     [self initUI]; // 界面
21 }
22 
23 #pragma mark - 界面
24 - (void)initUI
25 {
26     self.view.backgroundColor = [UIColor whiteColor];
27     
28     // redView
29     CGFloat redViewX = self.view.bounds.size.width / 2.0;
30     CGFloat redViewY = 70;
31     CGFloat redViewW = 10;
32     CGFloat redViewH = 10;
33     UIView *redView = [[UIView alloc] init];
34     redView.center = CGPointMake(redViewX, redViewY);
35     redView.bounds = CGRectMake(0, 0, redViewW, redViewH);
36     redView.backgroundColor = [UIColor redColor];
37     redView.tag = 100;
38     redView.layer.cornerRadius = 5;
39     redView.alpha = 0;
40     [self.view addSubview:redView];
41     
42     // btn
43     UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
44     btn.frame = CGRectMake(20, 70, self.view.bounds.size.width - 20 * 2, 50);
45     [btn setTitle:@"动画" forState:UIControlStateNormal];
46     btn.backgroundColor = [UIColor greenColor];
47     btn.tintColor = [UIColor whiteColor];
48     btn.titleLabel.font = [UIFont boldSystemFontOfSize:18];
49     btn.layer.cornerRadius = 4;
50     btn.layer.masksToBounds = YES;
51     [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
52     [self.view addSubview:btn];
53 }
54 
55 #pragma mark - 点击事件
56 // 动画
57 - (void)btnClick:(UIButton *)sender
58 {
59     UIView *redView = [self.view viewWithTag:100];
60     [UIView animateWithDuration:5 animations:^{
61         redView.alpha = 1.0;
62         redView.transform = CGAffineTransformMakeScale(10, 10);
63         redView.center = CGPointMake(redView.center.x, self.view.bounds.size.height - 150);
64     }];
65 }
66 
67 @end

7.动画重复

 1 #import "RepeatController.h"
 2 
 3 @interface RepeatController ()
 4 
 5 @end
 6 
 7 @implementation RepeatController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     
13     [self initUI]; // 界面
14 }
15 
16 #pragma mark - 界面
17 - (void)initUI
18 {
19     self.view.backgroundColor = [UIColor whiteColor];
20     
21     // redView
22     CGFloat redViewX = 30;
23     CGFloat redViewY = 150;
24     CGFloat redViewW = 50;
25     CGFloat redViewH = 50;
26     UIView *redView = [[UIView alloc] init];
27     redView.center = CGPointMake(redViewX, redViewY);
28     redView.bounds = CGRectMake(0, 0, redViewW, redViewH);
29     redView.backgroundColor = [UIColor redColor];
30     redView.tag = 100;
31     [self.view addSubview:redView];
32     
33     // blueView
34     CGFloat blueViewX = 30;
35     CGFloat blueViewY = 230;
36     CGFloat blueViewW = 50;
37     CGFloat blueViewH = 50;
38     UIView *blueView = [[UIView alloc] init];
39     blueView.center = CGPointMake(blueViewX, blueViewY);
40     blueView.bounds = CGRectMake(0, 0, blueViewW, blueViewH);
41     blueView.backgroundColor = [UIColor blueColor];
42     blueView.tag = 101;
43     [self.view addSubview:blueView];
44     
45     // btn1
46     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
47     btn1.frame = CGRectMake(20, 500, self.view.bounds.size.width - 20 * 2, 50);
48     [btn1 setTitle:@"非连贯重复动画" forState:UIControlStateNormal];
49     btn1.backgroundColor = [UIColor greenColor];
50     btn1.tintColor = [UIColor whiteColor];
51     btn1.titleLabel.font = [UIFont boldSystemFontOfSize:18];
52     btn1.layer.cornerRadius = 4;
53     btn1.layer.masksToBounds = YES;
54     [btn1 addTarget:self action:@selector(btnOneClick:) forControlEvents:UIControlEventTouchUpInside];
55     [self.view addSubview:btn1];
56     
57     // btn2
58     UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
59     btn2.frame = CGRectMake(20, 570, self.view.bounds.size.width - 20 * 2, 50);
60     [btn2 setTitle:@"连贯重复动画" forState:UIControlStateNormal];
61     btn2.backgroundColor = [UIColor greenColor];
62     btn2.tintColor = [UIColor whiteColor];
63     btn2.titleLabel.font = [UIFont boldSystemFontOfSize:18];
64     btn2.layer.cornerRadius = 4;
65     btn2.layer.masksToBounds = YES;
66     [btn2 addTarget:self action:@selector(btnTwoClick:) forControlEvents:UIControlEventTouchUpInside];
67     [self.view addSubview:btn2];
68 }
69 
70 #pragma mark - 点击事件
71 // 非连贯重复动画
72 - (void)btnOneClick:(UIButton *)sender
73 {
74     UIView *redView = [self.view viewWithTag:100];
75     // UIViewAnimationOptionRepeat重复执行
76     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionRepeat animations:^{
77         redView.center = CGPointMake(self.view.bounds.size.width - redView.center.x, redView.center.y);
78     } completion:nil];
79 }
80 // 连贯重复动画
81 - (void)btnTwoClick:(UIButton *)sender
82 {
83     UIView *blueView = [self.view viewWithTag:101];
84     // UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse 前后不断重复
85     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
86         blueView.center = CGPointMake(self.view.bounds.size.width - blueView.center.x, blueView.center.y);
87     } completion:nil];
88 }
89 
90 @end

8.动画效果

  1 #import "EasingController.h"
  2 
  3 @interface EasingController ()
  4 
  5 // 自定义动画效果网站：http://cubic-bezier.com
  6 
  7 @end
  8 
  9 @implementation EasingController
 10 
 11 - (void)viewDidLoad
 12 {
 13     [super viewDidLoad];
 14     
 15     [self initUI]; // 界面
 16 }
 17 
 18 #pragma mark - 界面
 19 - (void)initUI
 20 {
 21     self.view.backgroundColor = [UIColor whiteColor];
 22 
 23     // imageView
 24     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"]];
 25     imageView.userInteractionEnabled = YES;
 26     imageView.center = CGPointMake(self.view.bounds.size.width / 2.0, 200);
 27     imageView.layer.borderWidth = 2;
 28     imageView.layer.borderColor = [UIColor blueColor].CGColor;
 29     imageView.layer.masksToBounds = YES;
 30     [self.view addSubview:imageView];
 31     
 32     // view
 33     CGFloat viewX = 10;
 34     CGFloat viewW = 50;
 35     CGFloat viewH = 50;
 36     NSArray *colors = @[[UIColor redColor], [UIColor blueColor], [UIColor orangeColor], [UIColor purpleColor]];
 37     for (int i = 0; i < 4; i++) {
 38         CGFloat viewY = CGRectGetMaxY(imageView.frame) + 20 + (20 + viewH) * i;
 39         UIView *view = [[UIView alloc] initWithFrame:CGRectMake(viewX, viewY, viewW, viewH)];
 40         view.backgroundColor = colors[i];
 41         view.tag = 100 + i;
 42         [self.view addSubview:view];
 43     }
 44     
 45     // btn1
 46     UIView *view = [self.view viewWithTag:103];
 47     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
 48     btn1.frame = CGRectMake(10, CGRectGetMaxY(view.frame) + 20, (self.view.bounds.size.width - 10 * 2 - 5 * 3) / 4.0, 50);
 49     [btn1 setTitle:@"Linear" forState:UIControlStateNormal];
 50     btn1.backgroundColor = [UIColor greenColor];
 51     btn1.tintColor = [UIColor whiteColor];
 52     btn1.titleLabel.font = [UIFont boldSystemFontOfSize:18];
 53     btn1.layer.cornerRadius = 4;
 54     btn1.layer.masksToBounds = YES;
 55     [btn1 addTarget:self action:@selector(btnOneClick:) forControlEvents:UIControlEventTouchUpInside];
 56     [self.view addSubview:btn1];
 57     
 58     // btn2
 59     UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
 60     btn2.frame = CGRectMake(CGRectGetMaxX(btn1.frame) + 5, btn1.frame.origin.y, btn1.bounds.size.width, btn1.bounds.size.height);
 61     [btn2 setTitle:@"EaseIn" forState:UIControlStateNormal];
 62     btn2.backgroundColor = [UIColor greenColor];
 63     btn2.tintColor = [UIColor whiteColor];
 64     btn2.titleLabel.font = [UIFont boldSystemFontOfSize:18];
 65     btn2.layer.cornerRadius = 4;
 66     btn2.layer.masksToBounds = YES;
 67     [btn2 addTarget:self action:@selector(btnTwoClick:) forControlEvents:UIControlEventTouchUpInside];
 68     [self.view addSubview:btn2];
 69     
 70     // btn3
 71     UIButton *btn3 = [UIButton buttonWithType:UIButtonTypeSystem];
 72     btn3.frame = CGRectMake(CGRectGetMaxX(btn2.frame) + 5, btn1.frame.origin.y, btn1.bounds.size.width, btn1.bounds.size.height);
 73     [btn3 setTitle:@"EaseOut" forState:UIControlStateNormal];
 74     btn3.backgroundColor = [UIColor greenColor];
 75     btn3.tintColor = [UIColor whiteColor];
 76     btn3.titleLabel.font = [UIFont boldSystemFontOfSize:18];
 77     btn3.layer.cornerRadius = 4;
 78     btn3.layer.masksToBounds = YES;
 79     [btn3 addTarget:self action:@selector(btnThreeClick:) forControlEvents:UIControlEventTouchUpInside];
 80     [self.view addSubview:btn3];
 81     
 82     // btn4
 83     UIButton *btn4 = [UIButton buttonWithType:UIButtonTypeSystem];
 84     btn4.frame = CGRectMake(CGRectGetMaxX(btn3.frame) + 5, btn1.frame.origin.y, btn1.bounds.size.width, btn1.bounds.size.height);
 85     [btn4 setTitle:@"EaseInOut" forState:UIControlStateNormal];
 86     btn4.backgroundColor = [UIColor greenColor];
 87     btn4.tintColor = [UIColor whiteColor];
 88     btn4.titleLabel.font = [UIFont boldSystemFontOfSize:18];
 89     btn4.layer.cornerRadius = 4;
 90     btn4.layer.masksToBounds = YES;
 91     [btn4 addTarget:self action:@selector(btnFourClick:) forControlEvents:UIControlEventTouchUpInside];
 92     [self.view addSubview:btn4];
 93 }
 94 
 95 #pragma mark - 点击事件
 96 // 1.Linear线性
 97 - (void)btnOneClick:(UIButton *)sender
 98 {
 99     UIView *redView = [self.view viewWithTag:100];
100     // UIViewAnimationOptionCurveLinear线性
101     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
102         redView.center = CGPointMake(self.view.bounds.size.width - redView.center.x, redView.center.y);
103     } completion:nil];
104 }
105 // 2.EaseIn渐进快出
106 - (void)btnTwoClick:(UIButton *)sender
107 {
108     UIView *blueView = [self.view viewWithTag:101];
109     // UIViewAnimationOptionCurveEaseIn渐进快出
110     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
111         blueView.center = CGPointMake(self.view.bounds.size.width - blueView.center.x, blueView.center.y);
112     } completion:nil];
113     
114 }
115 // 3.EaseOut快进渐出
116 - (void)btnThreeClick:(UIButton *)sender
117 {
118     UIView *orangeView = [self.view viewWithTag:102];
119     // UIViewAnimationOptionCurveEaseOut快进渐出
120     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
121         orangeView.center = CGPointMake(self.view.bounds.size.width - orangeView.center.x, orangeView.center.y);
122     } completion:nil];
123 }
124 // 4.EaseInOut渐进渐出
125 - (void)btnFourClick:(UIButton *)sender
126 {
127     UIView *purpleView = [self.view viewWithTag:103];
128     // UIViewAnimationOptionCurveEaseInOut渐进渐出
129     [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
130         purpleView.center = CGPointMake(self.view.bounds.size.width - purpleView.center.x, purpleView.center.y);
131     } completion:nil];
132 }
133 
134 @end

9.弹簧动画

 1 #import "SpringController.h"
 2 
 3 @interface SpringController ()
 4 
 5 @end
 6 
 7 @implementation SpringController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     
13     [self initUI]; // 界面
14 }
15 
16 #pragma mark - 界面
17 - (void)initUI
18 {
19     self.view.backgroundColor = [UIColor whiteColor];
20     
21     // view
22     CGFloat viewY = 200;
23     CGFloat viewW = 100;
24     CGFloat viewH = 100;
25     NSArray *colors = @[[UIColor redColor], [UIColor blueColor], [UIColor yellowColor]];
26     for (int i = 0; i < 3; i++) {
27         CGFloat viewX = self.view.bounds.size.width / 6.0 * ((i + 1) * 2 - 1);
28         UIView *view = [[UIView alloc] init];
29         view.center = CGPointMake(viewX, viewY);
30         view.bounds = CGRectMake(0, 0, viewW, viewH);
31         view.backgroundColor = colors[i];
32         view.tag = 100 + i;
33         [self.view addSubview:view];
34     }
35     
36     // btn
37     UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
38     btn.frame = CGRectMake(20, 70, self.view.bounds.size.width - 20 * 2, 50);
39     [btn setTitle:@"动画" forState:UIControlStateNormal];
40     btn.backgroundColor = [UIColor greenColor];
41     btn.tintColor = [UIColor whiteColor];
42     btn.titleLabel.font = [UIFont boldSystemFontOfSize:18];
43     btn.layer.cornerRadius = 4;
44     btn.layer.masksToBounds = YES;
45     [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
46     [self.view addSubview:btn];
47 }
48 
49 #pragma mark - 点击事件
50 // 动画
51 - (void)btnClick:(UIButton *)sender
52 {
53     // iOS7.0以上才支持
54     // Damping:阻尼(0-1,越大阻力越大)
55     // Velocity:初始化速度(0-1)
56     [UIView animateWithDuration:5 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:1 options:UIViewAnimationOptionCurveLinear animations:^{
57         UIView *redView = [self.view viewWithTag:100];
58         UIView *blueView = [self.view viewWithTag:101];
59         UIView *yellowView = [self.view viewWithTag:102];
60         redView.center = CGPointMake(redView.center.x, self.view.bounds.size.height - redView.center.y);
61         blueView.center = CGPointMake(blueView.center.x, self.view.bounds.size.height - blueView.center.y);
62         yellowView.center = CGPointMake(yellowView.center.x, self.view.bounds.size.height - yellowView.center.y);
63     } completion:nil];
64 }
65 
66 @end

10.转场动画

  1 #import "TransitionsController.h"
  2 
  3 // 图片总数
  4 #define kImageCount 6
  5 
  6 @interface TransitionsController ()
  7 
  8 // 动画切换的imageView
  9 @property (nonatomic, strong) UIImageView *imageView;
 10 // 下一张
 11 @property (nonatomic, strong) UIButton *frontBtn;
 12 // 上一张
 13 @property (nonatomic, strong) UIButton *backBtn;
 14 // 当前图片的索引
 15 @property (nonatomic, assign) int index;
 16 
 17 @end
 18 
 19 @implementation TransitionsController
 20 
 21 - (void)viewDidLoad
 22 {
 23     [super viewDidLoad];
 24     
 25     [self initUI]; // 界面
 26 }
 27 
 28 #pragma mark - 界面
 29 - (void)initUI
 30 {
 31     self.view.backgroundColor = [UIColor whiteColor];
 32     
 33     // 创建imageView
 34     CGFloat scale = 300.0 / 160;
 35     CGFloat width = self.view.bounds.size.width - 30 * 2;
 36     CGFloat height = width / scale;
 37     _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(30, 70, width, height)];
 38     _imageView.image = [UIImage imageNamed:@"1"];
 39     _imageView.userInteractionEnabled = YES; // 打开交互
 40     [self.view addSubview:_imageView];
 41     
 42     // 下一张
 43     _frontBtn = [UIButton buttonWithType:UIButtonTypeSystem];
 44     _frontBtn.frame = CGRectMake(30, CGRectGetMaxY(_imageView.frame) + 20, _imageView.bounds.size.width / 2.0 - 20, 50);
 45     [_frontBtn setTitle:@"下一张" forState:UIControlStateNormal];
 46     _frontBtn.tintColor = [UIColor whiteColor];
 47     _frontBtn.titleLabel.font = [UIFont boldSystemFontOfSize:20];
 48     _frontBtn.backgroundColor = [UIColor redColor];
 49     _frontBtn.layer.cornerRadius = 10;
 50     _frontBtn.tag = 10;
 51     [_frontBtn addTarget:self action:@selector(frontBtnClick:) forControlEvents:UIControlEventTouchUpInside];
 52     [self.view addSubview:_frontBtn];
 53     
 54     // 上一张
 55     _backBtn = [UIButton buttonWithType:UIButtonTypeSystem];
 56     _backBtn.frame = CGRectMake(CGRectGetMaxX(_frontBtn.frame) + 40, _frontBtn.frame.origin.y, _frontBtn.frame.size.width, _frontBtn.frame.size.height);
 57     [_backBtn setTitle:@"上一张" forState:UIControlStateNormal];
 58     _backBtn.tintColor = [UIColor whiteColor];
 59     _backBtn.titleLabel.font = [UIFont boldSystemFontOfSize:20];
 60     _backBtn.backgroundColor = [UIColor redColor];
 61     _backBtn.layer.cornerRadius = 10;
 62     _backBtn.tag = 11;
 63     [_backBtn addTarget:self action:@selector(backBtnClick:) forControlEvents:UIControlEventTouchUpInside];
 64     [self.view addSubview:_backBtn];
 65     
 66     // 当前图片索引为1
 67     _index = 1;
 68     // 当前禁用backBtn
 69     _backBtn.enabled = NO;
 70     _backBtn.backgroundColor = [UIColor lightGrayColor];
 71 }
 72 
 73 #pragma mark - 点击事件
 74 // 1.下一张
 75 - (void)frontBtnClick:(UIButton *)btn
 76 {
 77     // 当前图片索引+1
 78     _index++;
 79     
 80     // 启用backBtn
 81     if (_index == 1 + 1) {
 82         _backBtn.enabled = YES;
 83         _backBtn.backgroundColor = [UIColor redColor];
 84     }
 85     
 86     // 判断是否到最后一张，最后一张禁用frontBtn
 87     if (_index == kImageCount) {
 88         _frontBtn.enabled = NO;
 89         _frontBtn.backgroundColor = [UIColor lightGrayColor];
 90     }
 91     
 92     // 切换图片
 93     NSString *imageName = [NSString stringWithFormat:@"%d", _index];
 94     _imageView.image = [UIImage imageNamed:imageName];
 95     
 96     // 转场动画
 97     // 参数1：需要做动画的View
 98     // 参数2：动画时间
 99     // 参数3：动画转场样式
100     // UIViewAnimationOptionTransitionNone // default
101     // UIViewAnimationOptionTransitionFlipFromLeft
102     // UIViewAnimationOptionTransitionFlipFromRight
103     // UIViewAnimationOptionTransitionCurlUp
104     // UIViewAnimationOptionTransitionCurlDown
105     // UIViewAnimationOptionTransitionCrossDissolve
106     // UIViewAnimationOptionTransitionFlipFromTop
107     // UIViewAnimationOptionTransitionFlipFromBottom
108     // 参数4：执行动画时需要做的事情
109     // 参数5：动画结束后需要做的事情
110     [UIView transitionWithView:_imageView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{
111         
112         // 执行动画时需要做的事情
113         
114     } completion:^(BOOL finished) {
115         
116         // 动画结束后需要做的事情
117         
118     }];
119 }
120 // 2.上一张
121 - (void)backBtnClick:(UIButton *)btn
122 {
123     // 当前图片索引-1
124     _index--;
125     
126     // 启用frontBtn
127     if (_index == kImageCount - 1) {
128         _frontBtn.enabled = YES;
129         _frontBtn.backgroundColor = [UIColor redColor];
130     }
131     
132     // 判断是否第一张，最后一张禁用backBtn
133     if (_index == 1) {
134         _backBtn.enabled = NO;
135         _backBtn.backgroundColor = [UIColor lightGrayColor];
136     }
137     
138     // 切换图片
139     NSString *imageName = [NSString stringWithFormat:@"%d", _index];
140     _imageView.image = [UIImage imageNamed:imageName];
141     
142     // 转场动画
143     // 参数1：需要做动画的View
144     // 参数2：动画时间
145     // 参数3：动画转场样式
146     // UIViewAnimationOptionTransitionNone // default
147     // UIViewAnimationOptionTransitionFlipFromLeft
148     // UIViewAnimationOptionTransitionFlipFromRight
149     // UIViewAnimationOptionTransitionCurlUp
150     // UIViewAnimationOptionTransitionCurlDown
151     // UIViewAnimationOptionTransitionCrossDissolve
152     // UIViewAnimationOptionTransitionFlipFromTop
153     // UIViewAnimationOptionTransitionFlipFromBottom
154     // 参数4：执行动画时需要做的事情
155     // 参数5：动画结束后需要做的事情
156     [UIView transitionWithView:_imageView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{
157         // 执行动画时需要做的事情
158     } completion:^(BOOL finished) {
159         // 动画结束后需要做的事情
160     }];
161 }
162 
163 @end

posted @ 2017-11-16 09:23 Frank9098 阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

Frank Lee

502-UIView的动画

公告