iOS-小红书欢迎页动画剖析

闲来无事时读到移动开发前线的这篇文章，里面介绍了一些小红书开发者的相关心得。
小红书的欢迎相关界面相关效果很棒，忍不住想模仿着做一下。
注：文章中提到小红书的开发者将相关代码分享到github上了，但在下能力欠佳，没有搜索到，因此我所有的代码都是根据自己的猜测写出来的，可能有些地方与原作者的实现方式有所不同甚至缺漏，还请了解的朋友不吝赐教，另外能Po下他们的git仓库就更好了😁。
注2：这个欢迎界面是安卓版的，我不了解iOS的小红书是不是也是这样的，懒人如我连下个App都要命ORZ。
注3：Demo在此

---

RedBook.gif

那么，首先来剖析一下界面相关效果吧，首先：
1、界面由一个屏幕大小的View（称为loginView）及一个略小的View(称为explainView)组成，它们两者的职责分别是展示登录注册相关界面的跟展示说明界面，并且，两者都存在动画。
2、loginView的动画为：当explainView消失时缩小背景图、上移登录注册相关界面。
3、explainView动画为：当存在于explainView中的ScrollView（称为explainScrollView）滑动到最后时若用户继续左滑则滑动整个explainView
4、explainView中有两个View承担不同职责，explainScrollView及bottomView, explainScrollView展示帧动画(帧动画是我猜的，另外有一点存疑，第一次滑动时没有分页效果，似乎这里的实现逻辑有所不同，真想看下他们的代码)及文字说明，bottomView展示自定义的UIPageControl和一个UIButton。（相关代码为纯布局代码，不多加叙述）
……

首先，先来实现explainView，相关布局代码不多加叙述，大体上的思路就是根据屏幕大小换算一个略小的View，然后在View上放置一个UIScrollView及UIView(你也可以直接把UIPageControl放在explainView上)，然后就是UIScrollView与UIPageControl的联动逻辑，接着就可以得到下图：

屏幕快照 2016-08-15 下午6.53.59.png

好吧，略丑……
接着是平移explainView，我第一个思路是想用TouchBegin(Move、End)及手势实现，但真正操作起来才发现这样代码繁多，并且，完全达不到想要的效果，思索片刻后找到了另一个办法：

        //在explainView的外层再套上一个ScrollView就可以实现与gif一模一样的效果，完全不需要根据手指挪动的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)

然后关联explainView与loginView

    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let num = Int(scrollView.contentOffset.x / scrollView.frame.width)
        if num > 0 {
           //当explainView消失时抹除相关View并且执行loginView相关动画，Demo因为偷懒所以全部是使用frame的死代码。
            scrollView.removeFromSuperview()
            loginView?.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height / 3)
            loginView?.updateUI()
        }
    }

仔细观察gif中的loginView相关动画，你可以发觉背景图与Logo的相关效果并不一致，若背景与Logo存在于同一张图片上会让整张图片压扁，不管是花纹还是logo都会变成一坨烂泥。
所以实际上应该将背景图与Logo切分开来，比如这样：

backgroud.png
Logo.png

(手头就一张看着靠谱点的载入图，好死好活用PS分离开来，没有花纹还请多加包涵)
这样，我们可以大致推测出实现代码，首先，平铺背景图的，直接裁剪掉大于View的图片部分，当执行缩小动画时就能保证花纹不被压缩。接着是Logo，独立存在的LogoView只要在执行动画时根据比例缩小并且位移即可。

 //当说明界面消失时修改登录界面布局
    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
        }
    }

屏幕快照 2016-08-15 下午7.35.47.png

接下来是登录注册界面上移，观察gif我们可以发现登录注册两个按钮的背景与背景图一样，即当登录注册界面上移时并不是贴合背景图而是向上挪动了一段距离让两个按钮镶嵌在背景图上。

 //当说明界面消失时修改登录界面布局
    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)
        }
    }

屏幕快照 2016-08-15 下午7.42.49.png

接下来设置按钮的选中图片以及与登录注册相关界面（按钮与ScrollView联动）的相关逻辑不多加叙述（其实是我懒）。