IOS 会动的登录界面

引言

动画一直是笔者最喜欢的，在现在广大的APP市场中，很多相似的软件拼功能已经无法获得用户群体，要做到让用户喜欢，体验是重中之重。一个好的动画效果，不仅能提升逼格，还能提高用户体验。

会动的登录界面

先来看看效果吧



是不是感觉挺炫酷的！

原型界面

我们可以看到原型界面是一张颜色渐变的背景图片，上面添加几个模糊的气泡。作为一名程序员，当然十八般武艺样样精通最好。这个界面笔者是用Sketch软件制作的，类似PhotoShop，但是做APP界面更加快捷方便，而且上手非常简单，大家空余时间也可以学学自己当设计师^^。传送门

代码

这个界面效果主要是用view层动画组合而成

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *cicleImage;
@property (weak, nonatomic) IBOutlet UITextField *userNameText;
@property (weak, nonatomic) IBOutlet UITextField *passwordText;
@property (weak, nonatomic) IBOutlet UIImageView *bubble1;
@property (weak, nonatomic) IBOutlet UIImageView *bubble2;
@property (weak, nonatomic) IBOutlet UIImageView *bubble3;
@property (weak, nonatomic) IBOutlet UIImageView *bubble4;
@property (weak, nonatomic) IBOutlet UIImageView *bubble5;
@property (weak, nonatomic) IBOutlet UIImageView *bubble6;
@property (weak, nonatomic) IBOutlet UIButton *login;
@property (weak, nonatomic) IBOutlet UIView *wrongView;

@property (nonatomic, strong) UIActivityIndicatorView *spinner;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
self.bubble1.transform = CGAffineTransformMakeScale(0, 0);
self.bubble2.transform = CGAffineTransformMakeScale(0, 0);
self.bubble3.transform = CGAffineTransformMakeScale(0, 0);
self.bubble4.transform = CGAffineTransformMakeScale(0, 0);
self.bubble5.transform = CGAffineTransformMakeScale(0, 0);

CGFloat x;
x -= self.view.bounds.size.width/2;
self.cicleImage.center = CGPointMake(x, self.cicleImage.center.y);

}

- (void)viewWillAppear:(BOOL)animated {

[super viewWillAppear:animated];

[UIView animateWithDuration:0.3 delay:0.3 options:0 animations:^{
self.bubble1.transform = CGAffineTransformMakeScale(1, 1);
self.bubble2.transform = CGAffineTransformMakeScale(1, 1);
self.bubble5.transform = CGAffineTransformMakeScale(1, 1);
self.bubble6.transform = CGAffineTransformMakeScale(1, 1);
} completion:nil];

[UIView animateWithDuration:0.3 delay:0.3 options:0 animations:^{
self.bubble3.transform = CGAffineTransformMakeScale(1, 1);
self.bubble4.transform = CGAffineTransformMakeScale(1, 1);
} completion:nil];

[UIView animateWithDuration:4 delay:1 usingSpringWithDamping:0.1 initialSpringVelocity:2 options:3 animations:^{
CGFloat x;
x += 50;
self.cicleImage.center = CGPointMake(x, self.cicleImage.center.y);
} completion:nil];
[UIView animateWithDuration:0.4 delay:0.6 options:0 animations:^{
CGFloat x;
x += self.view.bounds.size.width;
self.userNameText.center = CGPointMake(x, self.userNameText.center.y);
} completion:nil];

[UIView animateWithDuration:0.4 delay:0.6 options:0 animations:^{
CGFloat x;
x += self.view.bounds.size.width;
self.passwordText.center = CGPointMake(x, self.passwordText.center.y);
} completion:nil];

[UIView animateWithDuration:0.4 delay:0.8 options:0 animations:^{
CGFloat x;
x += self.view.bounds.size.width;
self.login.center = CGPointMake(x, self.login.center.y);
} completion:nil];

}

- (IBAction)loginBtnClick:(id)sender {

[self.login addSubview:self.spinner];
self.spinner.frame = CGRectMake(12, 12, self.spinner.frame.size.width, self.spinner.frame.size.height);
[self.spinner startAnimating];

[UIView transitionWithView:self.wrongView duration:0.3 options:0 animations:^{
self.wrongView.hidden = YES;
} completion:nil];

[UIView animateWithDuration:0.3 animations:^{
self.login.center = self.view.center;
self.login.transform = CGAffineTransformMakeScale(0.8, 0.8);
}completion:^(BOOL finished) {
self.login.transform = CGAffineTransformMakeScale(1, 1);
[UIView animateWithDuration:1.5 delay:0 options:0 animations:^{
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.7 animations:^{
self.login.center = CGPointMake(self.login.center.x, self.login.center.y+90);
[self.spinner removeFromSuperview];
}completion:^(BOOL finished) {
[UIView transitionWithView:self.wrongView duration:0.3 options:0 animations:^{
self.wrongView.hidden = NO;
} completion:nil];
}];
}];
}];

}

仅仅是做了一个效果，其他登录逻辑处理大家再按照需求去完善吧，工程我已经放到了这里