動畫特效四：精緻登陸，動畫特效

動畫特效四：精緻登陸，動畫特效

傳統的登陸介面只是一個靜態UI，讓使用者輸入使用者名稱及密碼就可以了。但為了增加使用者體驗，我們可以為登陸介面適當的添加動畫效果。樣本的靜態登陸介面如下：

添加動畫後的效果如下：

一、動畫效果分析：

1. title和兩個文字框是從螢幕左側推進過來的，並且有層次感。

2. 登陸按鈕是從下面推上來的，並且具有彈簧效果。

3. 背景中的雲朵是一直在漂浮移動的，並且當雲朵離開了螢幕右側，會立刻從螢幕左側再次進入介面。

二、思路及代碼

首先來分析第一點，要讓title和兩個文字框推進過來，預設情況下，應該使得他們的位置在螢幕之外，如所示

即上面的元素的CenterX = CenterX - 螢幕寬度，以title為例，在viewWillAppear中寫入代碼：

self.heading.centerX -= self.view.width;

然後在viewDidAppear中執行動畫操作，思路其實很簡單，就是將username的x值再還原。代碼如下：

 [UIView animateWithDuration:0.5 animations:^{        self.heading.centerX += self.view.width;    }];

然而，觀察動畫，他們進來的時候有層次感，所以我們只需為各自的動畫添加延時效果就可以了。比如username的動畫代碼如下：

[UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{        self.username.centerX += self.view.width;    } completion:nil];

我們再來分析第二點，登陸按鈕的彈簧效果。我們可以這樣設計，將登陸按鈕的y值先加上一定的距離（比如30px）並將其透明度置為0，在執行動畫的時候，用彈簧效果來顯示，動畫過程中，逐漸將透明度置為1。這樣看起來登陸按鈕有彈簧效果一樣。

viewWillAppear中得代碼：

self.loginButton.alpha = 0;    self.loginButton.centerY += 30;    self.loginButton.layer.cornerRadius = 5;

ViewDidAppear中得代碼：

 [UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        self.loginButton.centerY -= 30;        self.loginButton.alpha = 1.0;    } completion:nil];

最後再來分析漂浮的雲朵。由於有四個雲朵，所以可以考慮直接使用IBOutletCollection

@property (strong, nonatomic) IBOutletCollection(UIImageView) NSArray *clouds;

I） 各個雲朵的位置是不一致的，所以他們在螢幕上面漂移的時間也不一致。

雲朵漂移時間計算(假設跨過整個螢幕需要的時間為60s)：

1. 雲朵需要漂移的距離應該是螢幕總寬度減去雲朵的x值：self.view.width - cloud.x

2. 各個雲朵漂移所需要的時間應該為 (self.view.width - cloud.x) / self.view.width * 60

II)  怎樣達到無限漂移的效果？

應該是當雲朵一離開螢幕右側，即動畫完成的時候，立刻再次調用動畫。 

說的也許有點晦澀了，立刻上代碼：

// 雲朵迴圈飄過- (void)animateCloud:(UIImageView *)cloud {    CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;    [UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        cloud.x = self.view.width;    } completion:^(BOOL finished) {        cloud.x = - cloud.width;        [self animateCloud:cloud];    }];}

至此，代碼就已經分析完畢了。完整的代碼如下：

- (void)viewWillAppear:(BOOL)animated {    [super viewWillAppear:animated];        // move them(heading,username,password) off of the screen just before your view controller makes an appearance    self.heading.centerX -= self.view.width;    self.username.centerX -= self.view.width;    self.password.centerX -= self.view.width;        // 登陸按鈕預設不顯示    self.loginButton.alpha = 0;    self.loginButton.centerY += 30;    self.loginButton.layer.cornerRadius = 5;}- (void)viewDidAppear:(BOOL)animated {    [super viewDidAppear:animated];        // animate label，textfield(進入視野；加延時操作，顯得更有層次感)    [UIView animateWithDuration:0.5 animations:^{        self.heading.centerX += self.view.width;    }];    [UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{        self.username.centerX += self.view.width;    } completion:nil];        [UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionCurveEaseInOut animations:^{        self.password.centerX += self.view.width;    } completion:nil];        // animate login button (彈簧效果)    [UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        self.loginButton.centerY -= 30;        self.loginButton.alpha = 1.0;    } completion:nil];        //animateCloud(self.clouds[0]);    for (UIImageView *cloud in self.clouds) {         [self animateCloud:cloud];    }}// 雲朵迴圈飄過- (void)animateCloud:(UIImageView *)cloud {    CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;    [UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        cloud.x = self.view.width;    } completion:^(BOOL finished) {        cloud.x = - cloud.width;        [self animateCloud:cloud];    }];}

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。