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

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

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

本身要把握一些節奏了哈，否則網絡的部分、數據庫的部分還有巴拉巴拉好多東西要等到猴年馬月呀～

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

Paste_Image.png

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

CABasic Animation成果展現.gif

源代碼能夠在這裏下載，裏面有OC和Swift兩版。git.oschina.net/atypical/CA…

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

1. 畫風突變的笑臉

畫風突變的笑臉.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動畫系列之九：實現點讚的動畫及播放起伏指示器
第十篇：實戰系列:繪製過山車場景