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轴的移动。这里实现几个小方块的移动。

#import "PositionViewController.h"

@interface PositionViewController ()

@property (weak, nonatomic) IBOutlet UIView *redSquare;
@property (weak, nonatomic) IBOutlet UIView *greenSquare;

@end

@implementation PositionViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}


- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [UIView animateWithDuration:2 animations:^{
    self.redSquare.frame = CGRectMake(self.redSquare.frame.origin.x, 400, self.redSquare.bounds.size.width, self.redSquare.bounds.size.height);
    self.greenSquare.frame = CGRectMake(200, 500, self.greenSquare.bounds.size.width, self.greenSquare.bounds.size.height);
  }];
}

@end

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

#import "OpacityViewController.h"

@interface OpacityViewController ()

@property (weak, nonatomic) IBOutlet UIView *redSquare;

@end

@implementation OpacityViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [UIView animateWithDuration:2 animations:^{
    self.redSquare.alpha = 0.3;
  }];
}

@end

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

#import "ScaleViewController.h"

@interface ScaleViewController ()

@property (weak, nonatomic) IBOutlet UIView *redSquare;

@end

@implementation ScaleViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [UIView animateWithDuration:2 animations:^{
    //宽高缩放比；
    self.redSquare.transform = CGAffineTransformMakeScale(2, 3);
  }];
}

@end

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

#import "ColorViewController.h"

@interface ColorViewController ()

@property (weak, nonatomic) IBOutlet UIView *greenSquare;

@end

@implementation ColorViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [UIView animateWithDuration:2 animations:^{
    //宽高缩放比；
    self.greenSquare.backgroundColor = [UIColor brownColor];
  }];
}

@end

（5）旋转动画

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

#import "RotationViewController.h"

@interface RotationViewController ()

@property (weak, nonatomic) IBOutlet UIView *greenSquare;//旋转一次；
@property (weak, nonatomic) IBOutlet UIView *redSquare;//旋转无数次；

@end

@implementation RotationViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [self spinGreenSquare];
  [self spinRedSquare];
}

- (void)spinGreenSquare{

  [UIView animateWithDuration:2 animations:^{
    self.greenSquare.transform = CGAffineTransformRotate(self.greenSquare.transform, M_PI);//一个PI，180度；
  } completion:^(BOOL finished) {
  }];
}

- (void)spinRedSquare{

  [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.redSquare.transform = CGAffineTransformRotate(self.redSquare.transform, 360);//一个PI，180度；
  } completion:^(BOOL finished) {
    [self spinRedSquare];
  }];
}

@end

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

#import "RepeatViewController.h"

@interface RepeatViewController ()

@property (weak, nonatomic) IBOutlet UIView *greenSquare;
@property (weak, nonatomic) IBOutlet UIView *redSquare;

@end

@implementation RepeatViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat animations:^{
    self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);
  } completion:^(BOOL finished) {
  }];

  [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{

    self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);
  } completion:^(BOOL finished) {
  }];
}

@end

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

#import "EasingViewController.h"

@interface EasingViewController ()

@property (weak, nonatomic) IBOutlet UIView *greenSquare;
@property (weak, nonatomic) IBOutlet UIView *redSquare;

@end

@implementation EasingViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  //主要是设置options这个参数；
  [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{

    self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);
  } completion:nil];

  [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{

    self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);
  } completion:nil];
}

@end

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

#import "SpringViewController.h"

@interface SpringViewController ()

@property (weak, nonatomic) IBOutlet UIView *greenSquare;
@property (weak, nonatomic) IBOutlet UIView *redSquare;

@end

@implementation SpringViewController

- (void)viewDidLoad {

  [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated{

  [super viewWillAppear:animated];
  //通过设置参数即可改变不同的状态；
  [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionTransitionNone animations:^{

    self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height);
  } completion:nil];

  [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{

    self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);
  } completion:nil];
}

@end

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

#import "ImageRotationViewController.h"

#define kScreenWidth [[UIScreen mainScreen] bounds].size.width
#define kScreenHeight [[UIScreen mainScreen] bounds].size.height

/**
 *  在该示例中对UIImage进行旋转，注意不是对UIImageView旋转，这可以满足更多自定义的需求；
 */
@interface ImageRotationViewController ()

@end

@implementation ImageRotationViewController

- (void)viewDidLoad {

  [super viewDidLoad];
  /**
   UIImageOrientationUp,            // default orientation
   UIImageOrientationDown,          // 180 deg rotation
   UIImageOrientationLeft,          // 90 deg CCW
   UIImageOrientationRight,         // 90 deg CW
   UIImageOrientationUpMirrored,    // as above but image mirrored along other axis. horizontal flip
   UIImageOrientationDownMirrored,  // horizontal flip
   UIImageOrientationLeftMirrored,  // vertical flip
   UIImageOrientationRightMirrored, // vertical flip
   */
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, kScreenHeight / 2, 80, kScreenWidth)];
  UIImage *image = [UIImage imageNamed:@"1"];
  /**
   *  以下方法让一张图片一开始就处于旋转状态，而不是正放的状态；注意是对UIImage的操作，而不是对UIimageView控件的操作；最后再把image放入控件即可。
   */
  UIImage *imageRotate = [UIImage imageWithCGImage:image.CGImage scale:1 orientation:UIImageOrientationLeft];
  [imageView setImage:imageRotate];
  [self.view addSubview:imageView];
  [UIView animateWithDuration:2 animations:^{
    imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI_2);
    imageView.frame = CGRectMake(0, 64, kScreenWidth, 80);
  }];
}

@end

iOS UIView动画详解(Objective-C)

标签：

原文地址：http://blog.csdn.net/chenyufeng1991/article/details/50454184