iOS UIView动画详解(Objective-C)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

iOS UIView动画详解(Objective-C)

简介: <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:14px">     我在之前的一篇博客中《<a target="_blank" href="http://blog.csdn.net/chenyufeng1991/a

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

(1)位置动画

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

  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.x400self.redSquare.bounds.size.widthself.redSquare.bounds.size.height);  
  23.     self.greenSquare.frame = CGRectMake(200500self.greenSquare.bounds.size.widthself.greenSquare.bounds.size.height);  
  24.   }];  
  25. }  
  26.   
  27. @end  

(2)透明度动画

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

  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的大小发生改变,按比例的放大缩小。

  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(23);  
  22.   }];  
  23. }  
  24.   
  25. @end  

(4)颜色动画

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

  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绕圆点进行旋转。

  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.transform360);//一个PI,180度;  
  36.   } completion:^(BOOL finished) {  
  37.     [self spinRedSquare];  
  38.   }];  
  39. }  
  40.   
  41. @end  

(6)重复动画

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

  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(250self.greenSquare.frame.origin.yself.greenSquare.frame.size.widthself.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(250self.redSquare.frame.origin.yself.redSquare.frame.size.widthself.redSquare.frame.size.height);  
  28.   } completion:^(BOOL finished) {  
  29.   }];  
  30. }  
  31.   
  32. @end  

(7)缓冲动画

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

  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(250self.greenSquare.frame.origin.yself.greenSquare.frame.size.widthself.greenSquare.frame.size.height);  
  24.   } completion:nil];  
  25.   
  26.   [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{  
  27.   
  28.     self.redSquare.frame = CGRectMake(250self.redSquare.frame.origin.yself.redSquare.frame.size.widthself.redSquare.frame.size.height);  
  29.   } completion:nil];  
  30. }  
  31.   
  32. @end  

(8)弹簧动画

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

  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(250self.greenSquare.frame.origin.yself.greenSquare.frame.size.widthself.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(250self.redSquare.frame.origin.yself.redSquare.frame.size.widthself.redSquare.frame.size.height);  
  29.   } completion:nil];  
  30. }  
  31.   
  32. @end  

(9)图片旋转

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

  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 / 280, 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(064, kScreenWidth, 80);  
  39.   }];  
  40. }  
  41.   
  42. @end  

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章