iOS動畫系列之六：利用CABasic Animation完成帶動畫特效的登入介面

非典型技術宅發表於2017-09-20
iOS動畫特效

發現毫無節制的繼續擴充是一件沒有盡頭的事情。原計劃五篇完成的CAAnimation系列已經這是第六篇了，還至少有三篇才會完成。

最開始分享這個iOS Apprentice Notes的時候就是打算從基礎的部分開始，大體都過一遍之後再找專題或者自己感興趣的部分深入進去。現在突然發現有點脫離了初衷，看到某些分享的點贊數多、瀏覽量大，就自覺不自覺的想要迎合一下寶寶們。

自己要把握一些節奏了哈，不然網路的部分、資料庫的部分還有巴拉巴拉好多東西要等到猴年馬月呀～

今天主要是藉助完成一個帶動畫特效的登入介面的結束掉我們們的CABasic Animation部分。
在這個登入介面，登陸框、密碼框、登入按鈕依次滑入，點選登入按鈕會有閃動的效果。
完成後的效果圖如下：

Paste_Image.png
Paste_Image.png

然後不要臉的本人又夾帶了點私活，回顧了一下前面三篇關於CABasic Animation的內容。

CABasic Animation成果展示.gif
CABasic Animation成果展示.gif

原始碼可以在這裡下載，裡面有OC和Swift兩版。git.oschina.net/atypical/CA…

iOS動畫系列之CABasic-Animation（OC和Swift兩版）

1. 畫風突變的笑臉

畫風突變的笑臉.gif
畫風突變的笑臉.gif

1.1 動畫分析

根據上面的動圖，看到其實動畫就三個部分。
1， 眼睛在動畫的時候左右進行了呼喚，並且位置進行了下移。
2，代表嘴巴的方塊變大了。
3，動畫播放完畢之後出現了文字提示“嚇死寶寶了！”。

1.2 包含的動畫

1，有平移動畫，基礎部分可以參考：iOS動畫系列之四：基礎動畫之平移篇
2，有縮放動畫，基礎部分可以參考：iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇
3，阻尼動畫，就是眼睛變換位置後閃動的那一下。

1.3 程式碼實現

程式碼量其實很小，所以索性就一下子貼上來了。然後我們們再一點點說。

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定頭部標題的文字
    self.titleLabel.text = @"嚇死寶寶了！";

    //暫時先隱藏頭部標題，等動畫播放完成再顯示
    [self.titleLabel setHidden:YES];
}

//    觸控式螢幕之後觸發的方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    __weak typeof(self) weakSelf = self;

    //新增阻尼動畫
    [UIView animateWithDuration:0.8 delay:0.2 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{

        //改變黃色的中心點位置
        weakSelf.yellowView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.yellowView.center.x, weakSelf.yellowView.center.y + 30);

        //改變藍色的中心點位置
        weakSelf.greenView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.greenView.center.x, weakSelf.greenView.center.y + 30);

        //改變嘴巴的高度和中心點y的位置
        CGRect frame = CGRectMake(weakSelf.mouseView.frame.origin.x, weakSelf.mouseView.frame.origin.y, weakSelf.mouseView.frame.size.width, 180);

        weakSelf.mouseView.frame = frame;

        //這句一定要加，不然看不到動畫
        [weakSelf.view layoutIfNeeded];
    } completion:^(BOOL finished) {

        //新增阻尼動畫     
        [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{
            //把隱藏的標題文字設定為顯示狀態
            [weakSelf.titleLabel setHidden:NO];
        } completion:nil];
    }];

}複製程式碼

1.3.1 阻尼動畫

這個我們們前面還沒有分享過，所以第一個先說說這個怎麼實現的。
阻尼動畫是通過UIView裡面如下的方法實現的：

+(void)animateWithDuration:(NSTimeInterval)**duration** delay:(NSTimeInterval)**delay** usingSpringWithDamping:(CGFloat)**dampingRatio** initialSpringVelocity:(CGFloat)**velocity** options:(UIViewAnimationOptions)**options** animations:(void (^)(void))**animations** completion:(void (^__nullable)(BOOL finished))**completion**;複製程式碼

幾個引數的解釋：
duration : 動畫時間
delay : 延遲時間
dampingRatio : 阻尼係數(彈性) 越小越彈
velocity : 速率
options : 選項
animations : 做動畫的時候需要寫的程式碼都放在這裡，這是一個Block。
completion : 動畫完成後要執行的block。

1.3.2 weakSelf

在使用UIView新增動畫的時候，其實可以看到系統提供的都是Block。我們所寫的所有的動畫都是在block中編寫的。

通常在block裡面我們為了避免造成迴圈引用，都使用weakSelf替代self進行修飾。使用之前需要先宣告一下：

__weak typeof(self) weakSelf = self;複製程式碼

在這個動畫裡面其實並沒有造成迴圈引用，使用weakself和self都沒有什麼問題。但是我們們是為了引出weakSelf，特意使用的。以後我們們會分享一下弱引用和強引用。這裡就是買個伏筆。（心機婊）

2. 心跳

2.1 動畫分析

1，這裡我們們用到了縮放，基礎部分可以參考：iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇。
2， 照片的隱藏這部分動畫，我們們是通過修改imageView的alpha值實現的。

2.2 實現步驟

1， 公共方法的抽取。同前幾篇文章提到的一樣，宅胖懶。所以把會需要反覆用到的方法都抽取出來了。這次抽取了建立Layer的公共方法、建立Animation的方法。
2，設定心跳圖層的位置。這裡刻意為了複習CALayer，專門沒有建立imageView來載入心跳圖片。
3，CALayer並不能直接放置❤️的圖片，只能通過背景繪製的方法實現圖片載入。
4，為❤️新增動畫。
5，設定漸漸消失的圖片，設定位置、逐漸消失的動畫。

2.3 程式碼實現

程式碼稍微有一點點多，所以這裡我們們只放一下關鍵的部分。其餘的程式碼可以通過文章後面的連結下載原始碼。原始碼中註釋寫的可詳細可詳細了。

    //        將❤️圖層繪製上圖片
    heartLayer.contents = (__bridge id _Nullable)([heartImage CGImage]);

    //        設定照片消失的動畫
    [UIView animateWithDuration:2.0 animations:^{
        photoImageView.alpha = 0;
    }];

    //        動畫的節奏。心跳的節奏。為了讓更有節奏感一些，使用了快進快出模式。
    scaleAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];複製程式碼

3. iOS實踐：實現一個帶動效的登入介面

臭不要臉的，竟然前面夾帶了這麼多私貨！到這裡才分享登入介面。哈哈～

FreedomMobile是加拿大一家超級經濟實惠就是便宜，沒別的了的手機運營商。前身是wind，後來為了謀求更大的發展哼，肯定是牌子做爛了，換個牌子重新開始。我們中國很多餐廳都這麼幹，換個名字，原班人馬，就改了名字。

3.1 動畫分析

1，非典型技術宅這麼懶，肯定不會用新增一個layer的方式做了。我們們使用的都是UIView提供的動畫方法。
2，PhoneNumber 和Pin 這兩個輸入框是平移動畫。
3，登入按鈕是通過阻尼動畫實現的閃動。

3.2 實現步驟

1，登入頁的UI搭建，這裡偷懶用的是StoryBoard。
2，login按鈕的點選事件：使用模態或者PUSH都可以，彈出登入介面。
3，在登入介面的viewWillAppear方法中，先把兩個輸入框還有按鈕的位置都修改了，不然做動畫的時候我們們才能讓這些控制元件移動到正確的位置上嘛。
4，在viewDidAppear方法中，實現動畫。把兩個輸入框的位置放到正確地方，同時讓登入按鈕顯示出來。
5，實現登入按鈕點選事件：這裡模擬的是登入失敗的狀況，按鈕會進行晃動。

3.3 需要注意的一些小地方

1，為了能夠有一個相對舒服一點的視覺效果，對導航欄進行了隱藏。
2，修改了電池欄的顏色，能讓全屏的時候看起來舒服一點。預設情況下，系統的電池欄顏色都是黑色。
3，修改了各個邊框的圓角。如果有大量大量的圓角修改，請不要直接通過這種方式，會消耗一定的效能。就幾個點綴一下，當然是怎麼方便怎麼來啦。
4，在登入失敗互動的時候記得關閉、開啟互動效果。不讓在動畫的播放過程中可以不停的點選登入按鈕，如果動畫播放時間比較長，這個動畫時間是會累加的?。最後那個閃動按鈕就在那裡不停的左擺擺，右拜拜扭屁股啦～

 //        將導航欄隱藏
 [self.navigationController setNavigationBarHidden:YES];

 //    設定電池欄的狀態為白色
 - (UIStatusBarStyle)preferredStatusBarStyle{
 return UIStatusBarStyleLightContent;
 }

 //        設定登入和註冊兩個btn的圓角
 self.signBtn.layer.cornerRadius = 5;
 self.loginBtn.layer.cornerRadius = 5;

 //在動畫沒有播放完成之前，關閉按鈕的互動
 [weakSelf.loginBtn setEnabled:NO];複製程式碼

-----------------------華麗分割線，iOS動畫系列全集連結-------------------------------------------------
第一篇：iOS動畫系列之一：通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫(上)
第二篇：iOS動畫系列之二：通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫。包含了OC和Swift兩種原始碼(下)
第三篇：iOS動畫系列之三：Core Animation。介紹了Core Animation的常用屬性和方法。
第四篇：CABasic Animation。iOS動畫系列之四：基礎動畫之平移篇
第五篇：CABasic Animation。iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇
第六篇：iOS動畫系列之六：利用CABasic Animation完成帶動畫特效的登入介面
第七篇：iOS動畫系列之七：實現類似Twitter的啟動動畫
第八篇：iOS動畫系列之八：使用CAShapeLayer繪畫動態流量圖
第九篇：iOS動畫系列之九：實現點讚的動畫及播放起伏指示器
第十篇：實戰系列:繪製雲霄飛車場景

相關文章