引言

動畫一直是筆者最喜歡的，在現在廣大的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];
            }];
        }];
    }];



}

僅僅是做了一個效果，其他登入邏輯處理大家再按照需求去完善吧，工程我已經放到了這裡