閑來無事時讀到移動開發(fā)前線的這篇文章，里面介紹了一些小紅書開發(fā)者的相關心得。
小紅書的歡迎相關界面相關效果很棒，忍不住想模仿著做一下。
注：文章中提到小紅書的開發(fā)者將相關代碼分享到github上了，但在下能力欠佳，沒有搜索到，因此我所有的代碼都是根據(jù)自己的猜測寫出來的，可能有些地方與原作者的實現(xiàn)方式有所不同甚至缺漏，還請了解的朋友不吝賜教，另外能Po下他們的git倉庫就更好了??。
注2：這個歡迎界面是安卓版的，我不了解iOS的小紅書是不是也是這樣的，懶人如我連下個App都要命ORZ。
注3：Demo在此
那么，首先來剖析一下界面相關效果吧，首先：
1、界面由一個屏幕大小的View（稱為loginView）及一個略小的View(稱為explainView)組成，它們兩者的職責分別是展示登錄注冊相關界面的跟展示說明界面，并且，兩者都存在動畫。
2、loginView的動畫為：當explainView消失時縮小背景圖、上移登錄注冊相關界面。
3、explainView動畫為：當存在于explainView中的ScrollView（稱為explainScrollView）滑動到最后時若用戶繼續(xù)左滑則滑動整個explainView
4、explainView中有兩個View承擔不同職責，explainScrollView及bottomView, explainScrollView展示幀動畫(幀動畫是我猜的，另外有一點存疑，第一次滑動時沒有分頁效果，似乎這里的實現(xiàn)邏輯有所不同，真想看下他們的代碼)及文字說明，bottomView展示自定義的UIPageControl和一個UIButton。（相關代碼為純布局代碼，不多加敘述）
……
首先，先來實現(xiàn)explainView，相關布局代碼不多加敘述，大體上的思路就是根據(jù)屏幕大小換算一個略小的View，然后在View上放置一個UIScrollView及UIView(你也可以直接把UIPageControl放在explainView上)，然后就是UIScrollView與UIPageControl的聯(lián)動邏輯，接著就可以得到下圖：
好吧，略丑……
接著是平移explainView，我第一個思路是想用TouchBegin(Move、End)及手勢實現(xiàn)，但真正操作起來才發(fā)現(xiàn)這樣代碼繁多，并且，完全達不到想要的效果，思索片刻后找到了另一個辦法：
//在explainView的外層再套上一個ScrollView就可以實現(xiàn)與gif一模一樣的效果，完全不需要根據(jù)手指挪動的Point來反復計算。
let scrollview = UIScrollView(frame: view.frame)
view.addSubview(scrollview)
scrollview.pagingEnabled = true
scrollview.showsVerticalScrollIndicator = false
scrollview.showsHorizontalScrollIndicator = false
scrollview.contentSize = CGSize(width: view.frame.width * 2, height: view.frame.height)
scrollview.delegate = self
//contentView即explainView
let contentView = EPBaseView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width * 2 / 3, height: self.view.frame.height * 2 / 3))
contentView.center = view.center
scrollview.addSubview(contentView)
然后關聯(lián)explainView與loginView
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
let num = Int(scrollView.contentOffset.x / scrollView.frame.width)
if num > 0 {
//當explainView消失時抹除相關View并且執(zhí)行l(wèi)oginView相關動畫，Demo因為偷懶所以全部是使用frame的死代碼。
scrollView.removeFromSuperview()
loginView?.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height / 3)
loginView?.updateUI()
}
}
仔細觀察gif中的loginView相關動畫，你可以發(fā)覺背景圖與Logo的相關效果并不一致，若背景與Logo存在于同一張圖片上會讓整張圖片壓扁，不管是花紋還是logo都會變成一坨爛泥。
所以實際上應該將背景圖與Logo切分開來，比如這樣：
(手頭就一張看著靠譜點的載入圖，好死好活用PS分離開來，沒有花紋還請多加包涵)
這樣，我們可以大致推測出實現(xiàn)代碼，首先，平鋪背景圖的，直接裁剪掉大于View的圖片部分，當執(zhí)行縮小動畫時就能保證花紋不被壓縮。接著是Logo，獨立存在的LogoView只要在執(zhí)行動畫時根據(jù)比例縮小并且位移即可。
//當說明界面消失時修改登錄界面布局
func updateUI() {
UIView.animateWithDuration(0.3) {
self.backgroundImageView?.frame = self.frame
self.logoImgaeView?.frame = CGRect(x: 0, y: 0, width: 70, height: 70)
self.logoImgaeView?.center = self.center
}
}
接下來是登錄注冊界面上移，觀察gif我們可以發(fā)現(xiàn)登錄注冊兩個按鈕的背景與背景圖一樣，即當?shù)卿涀越缑嫔弦茣r并不是貼合背景圖而是向上挪動了一段距離讓兩個按鈕鑲嵌在背景圖上。
//當說明界面消失時修改登錄界面布局
func updateUI() {
UIView.animateWithDuration(0.3) {
self.backgroundImageView?.frame = self.frame
self.logoImgaeView?.frame = CGRect(x: 0, y: 0, width: 70, height: 70)
self.logoImgaeView?.center = self.center
//向上多挪動60個點
self.loginView?.frame.origin = CGPoint(x: 0, y: self.frame.height - 60)
}
}
接下來設置按鈕的選中圖片以及與登錄注冊相關界面（按鈕與ScrollView聯(lián)動）的相關邏輯不多加敘述（其實是我懶）。
