iOS UIView动画详解(Objective-C)

    我在之前的一篇博客中《iOS UIView动画详解(Swift)》讲解了使用Swift来实现UIView类下面提供的多种动画效果，如位置动画、旋转动画、缩放动画、颜色动画、透明度动画等等。为了这个题目的完整性，今天我使用Objective-C来完全重写以上的所有的动画。项目案例已经上传至：https://github.com/chenyufeng1991/iOS-UIView-Animation  中的Animation-OC文件夹下，另一个目录下则是Swift实现的动画。

（1）位置动画

PositionAnimation可以实现View的移动，最简单的就是X轴，Y轴的移动。这里实现几个小方块的移动。

[objc]  view plain copy print ?

1. #import "PositionViewController.h"  
2.   
3. @interface PositionViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
6. @property (weak, nonatomic) IBOutlet UIView *greenSquare;  
7.   
8. @end  
9.   
10. @implementation PositionViewController  
11.   
12. - (void)viewDidLoad {  
13.   
14.   [super viewDidLoad];  
15. }  
16.   
17.   
18. - (void)viewWillAppear:(BOOL)animated{  
19.   
20.   [super viewWillAppear:animated];  
21.   [UIView animateWithDuration:2 animations:^{  
22.     self.redSquare.frame = CGRectMake(self.redSquare.frame.origin.x, 400, self.redSquare.bounds.size.width, self.redSquare.bounds.size.height);  
23.     self.greenSquare.frame = CGRectMake(200, 500, self.greenSquare.bounds.size.width, self.greenSquare.bounds.size.height);  
24.   }];  
25. }  
26.   
27. @end  

（2）透明度动画

透明度动画可以让某个View的透明度在0-1之间改变。透明度为0表示全透明，看不见了。透明度为1表示和正常情况下一样。

[objc]  view plain copy print ?

1. #import "OpacityViewController.h"  
2.   
3. @interface OpacityViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
6.   
7. @end  
8.   
9. @implementation OpacityViewController  
10.   
11. - (void)viewDidLoad {  
12.   
13.   [super viewDidLoad];  
14. }  
15.   
16. - (void)viewWillAppear:(BOOL)animated{  
17.   
18.   [super viewWillAppear:animated];  
19.   [UIView animateWithDuration:2 animations:^{  
20.     self.redSquare.alpha = 0.3;  
21.   }];  
22. }  
23.   
24. @end  

（3）缩放动画

缩放动画可以让一个View的大小发生改变，按比例的放大缩小。

[objc]  view plain copy print ?

1. #import "ScaleViewController.h"  
2.   
3. @interface ScaleViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
6.   
7. @end  
8.   
9. @implementation ScaleViewController  
10.   
11. - (void)viewDidLoad {  
12.   
13.   [super viewDidLoad];  
14. }  
15.   
16. - (void)viewWillAppear:(BOOL)animated{  
17.   
18.   [super viewWillAppear:animated];  
19.   [UIView animateWithDuration:2 animations:^{  
20.     //宽高缩放比；  
21.     self.redSquare.transform = CGAffineTransformMakeScale(2, 3);  
22.   }];  
23. }  
24.   
25. @end  

（4）颜色动画

颜色动画可以让一个View在一个时间间隔内发生颜色的渐变，进行颜色的过渡。

[objc]  view plain copy print ?

1. #import "ColorViewController.h"  
2.   
3. @interface ColorViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *greenSquare;  
6.   
7. @end  
8.   
9. @implementation ColorViewController  
10.   
11. - (void)viewDidLoad {  
12.   
13.   [super viewDidLoad];  
14. }  
15.   
16. - (void)viewWillAppear:(BOOL)animated{  
17.   
18.   [super viewWillAppear:animated];  
19.   [UIView animateWithDuration:2 animations:^{  
20.     //宽高缩放比；  
21.     self.greenSquare.backgroundColor = [UIColor brownColor];  
22.   }];  
23. }  
24.   
25. @end  

（5）旋转动画

可以让某个View绕圆点进行旋转。

[objc]  view plain copy print ?

1. #import "RotationViewController.h"  
2.   
3. @interface RotationViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *greenSquare;//旋转一次；  
6. @property (weak, nonatomic) IBOutlet UIView *redSquare;//旋转无数次；  
7.   
8. @end  
9.   
10. @implementation RotationViewController  
11.   
12. - (void)viewDidLoad {  
13.   
14.   [super viewDidLoad];  
15. }  
16.   
17. - (void)viewWillAppear:(BOOL)animated{  
18.   
19.   [super viewWillAppear:animated];  
20.   [self spinGreenSquare];  
21.   [self spinRedSquare];  
22. }  
23.   
24. - (void)spinGreenSquare{  
25.   
26.   [UIView animateWithDuration:2 animations:^{  
27.     self.greenSquare.transform = CGAffineTransformRotate(self.greenSquare.transform, M_PI);//一个PI，180度；  
28.   } completion:^(BOOL finished) {  
29.   }];  
30. }  
31.   
32. - (void)spinRedSquare{  
33.   
34.   [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{  
35.     self.redSquare.transform = CGAffineTransformRotate(self.redSquare.transform, 360);//一个PI，180度；  
36.   } completion:^(BOOL finished) {  
37.     [self spinRedSquare];  
38.   }];  
39. }  
40.   
41. @end  

（6）重复动画

该动画可以让某个动画过程反复执行。

[objc]  view plain copy print ?

1. #import "RepeatViewController.h"  
2.   
3. @interface RepeatViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *greenSquare;  
6. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
7.   
8. @end  
9.   
10. @implementation RepeatViewController  
11.   
12. - (void)viewDidLoad {  
13.   
14.   [super viewDidLoad];  
15. }  
16.   
17. - (void)viewWillAppear:(BOOL)animated{  
18.   
19.   [super viewWillAppear:animated];  
20.   [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat animations:^{  
21.     self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);  
22.   } completion:^(BOOL finished) {  
23.   }];  
24.   
25.   [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{  
26.   
27.     self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);  
28.   } completion:^(BOOL finished) {  
29.   }];  
30. }  
31.   
32. @end  

（7）缓冲动画

这里主要使用了贝塞尔曲线的效果来改变View动画的速率效果。大家可以实践一下。

[objc]  view plain copy print ?

1. #import "EasingViewController.h"  
2.   
3. @interface EasingViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *greenSquare;  
6. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
7.   
8. @end  
9.   
10. @implementation EasingViewController  
11.   
12. - (void)viewDidLoad {  
13.   
14.   [super viewDidLoad];  
15. }  
16.   
17. - (void)viewWillAppear:(BOOL)animated{  
18.   
19.   [super viewWillAppear:animated];  
20.   //主要是设置options这个参数；  
21.   [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{  
22.   
23.     self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);  
24.   } completion:nil];  
25.   
26.   [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{  
27.   
28.     self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);  
29.   } completion:nil];  
30. }  
31.   
32. @end  

（8）弹簧动画

该动画执行过程中类似弹簧的真实效果，你可以设置弹簧的阻尼和初始速度来达到非常逼真的弹簧抖动。

[objc]  view plain copy print ?

1. #import "SpringViewController.h"  
2.   
3. @interface SpringViewController ()  
4.   
5. @property (weak, nonatomic) IBOutlet UIView *greenSquare;  
6. @property (weak, nonatomic) IBOutlet UIView *redSquare;  
7.   
8. @end  
9.   
10. @implementation SpringViewController  
11.   
12. - (void)viewDidLoad {  
13.   
14.   [super viewDidLoad];  
15. }  
16.   
17. - (void)viewWillAppear:(BOOL)animated{  
18.   
19.   [super viewWillAppear:animated];  
20.   //通过设置参数即可改变不同的状态；  
21.   [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionTransitionNone animations:^{  
22.   
23.     self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);  
24.   } completion:nil];  
25.   
26.   [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{  
27.   
28.     self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);  
29.   } completion:nil];  
30. }  
31.   
32. @end  

（9）图片旋转

在我们实际的需求中，我们可能需要让图片在移动旋转之前就处于左转90度、右转90度、旋转180度的状态，然后在此基础上再进行其他的动画。实现如下：

[objc]  view plain copy print ?

1. #import "ImageRotationViewController.h"  
2.   
3. #define kScreenWidth [[UIScreen mainScreen] bounds].size.width  
4. #define kScreenHeight [[UIScreen mainScreen] bounds].size.height  
5.   
6. /** 
7.  *  在该示例中对UIImage进行旋转，注意不是对UIImageView旋转，这可以满足更多自定义的需求； 
8.  */  
9. @interface ImageRotationViewController ()  
10.   
11. @end  
12.   
13. @implementation ImageRotationViewController  
14.   
15. - (void)viewDidLoad {  
16.   
17.   [super viewDidLoad];  
18.   /** 
19.    UIImageOrientationUp,            // default orientation 
20.    UIImageOrientationDown,          // 180 deg rotation 
21.    UIImageOrientationLeft,          // 90 deg CCW 
22.    UIImageOrientationRight,         // 90 deg CW 
23.    UIImageOrientationUpMirrored,    // as above but image mirrored along other axis. horizontal flip 
24.    UIImageOrientationDownMirrored,  // horizontal flip 
25.    UIImageOrientationLeftMirrored,  // vertical flip 
26.    UIImageOrientationRightMirrored, // vertical flip 
27.    */  
28.   UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, kScreenHeight / 2, 80, kScreenWidth)];  
29.   UIImage *image = [UIImage imageNamed:@"1"];  
30.   /** 
31.    *  以下方法让一张图片一开始就处于旋转状态，而不是正放的状态；注意是对UIImage的操作，而不是对UIimageView控件的操作；最后再把image放入控件即可。 
32.    */  
33.   UIImage *imageRotate = [UIImage imageWithCGImage:image.CGImage scale:1 orientation:UIImageOrientationLeft];  
34.   [imageView setImage:imageRotate];  
35.   [self.view addSubview:imageView];  
36.   [UIView animateWithDuration:2 animations:^{  
37.     imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI_2);  
38.     imageView.frame = CGRectMake(0, 64, kScreenWidth, 80);  
39.   }];  
40. }  
41.   
42. @end  

      这里实现的动画都是非常的简单，大家可以通过下载代码自己尝试一下。后续我会给大家讲解更为高级炫酷的动画。尽请期待。