iOS-小紅書歡迎頁(yè)動(dòng)畫剖析

閑來(lái)無(wú)事時(shí)讀到移動(dòng)開(kāi)發(fā)前線的這篇文章充甚,里面介紹了一些小紅書開(kāi)發(fā)者的相關(guān)心得以政。
小紅書的歡迎相關(guān)界面相關(guān)效果很棒,忍不住想模仿著做一下伴找。
注:文章中提到小紅書的開(kāi)發(fā)者將相關(guān)代碼分享到github上了盈蛮,但在下能力欠佳,沒(méi)有搜索到技矮,因此我所有的代碼都是根據(jù)自己的猜測(cè)寫出來(lái)的抖誉,可能有些地方與原作者的實(shí)現(xiàn)方式有所不同甚至缺漏,還請(qǐng)了解的朋友不吝賜教衰倦,另外能Po下他們的git倉(cāng)庫(kù)就更好了??袒炉。
注2:這個(gè)歡迎界面是安卓版的,我不了解iOS的小紅書是不是也是這樣的樊零,懶人如我連下個(gè)App都要命ORZ我磁。
注3:Demo在此


RedBook.gif

那么,首先來(lái)剖析一下界面相關(guān)效果吧驻襟,首先:
1夺艰、界面由一個(gè)屏幕大小的View(稱為loginView)及一個(gè)略小的View(稱為explainView)組成,它們兩者的職責(zé)分別是展示登錄注冊(cè)相關(guān)界面的跟展示說(shuō)明界面沉衣,并且郁副,兩者都存在動(dòng)畫。
2厢蒜、loginView的動(dòng)畫為:當(dāng)explainView消失時(shí)縮小背景圖霞势、上移登錄注冊(cè)相關(guān)界面。
3斑鸦、explainView動(dòng)畫為:當(dāng)存在于explainView中的ScrollView(稱為explainScrollView)滑動(dòng)到最后時(shí)若用戶繼續(xù)左滑則滑動(dòng)整個(gè)explainView
4愕贡、explainView中有兩個(gè)View承擔(dān)不同職責(zé),explainScrollView及bottomView, explainScrollView展示幀動(dòng)畫(幀動(dòng)畫是我猜的巷屿,另外有一點(diǎn)存疑固以,第一次滑動(dòng)時(shí)沒(méi)有分頁(yè)效果,似乎這里的實(shí)現(xiàn)邏輯有所不同,真想看下他們的代碼)及文字說(shuō)明憨琳,bottomView展示自定義的UIPageControl和一個(gè)UIButton诫钓。(相關(guān)代碼為純布局代碼,不多加敘述)
……

首先篙螟,先來(lái)實(shí)現(xiàn)explainView菌湃,相關(guān)布局代碼不多加敘述,大體上的思路就是根據(jù)屏幕大小換算一個(gè)略小的View遍略,然后在View上放置一個(gè)UIScrollView及UIView(你也可以直接把UIPageControl放在explainView上)惧所,然后就是UIScrollView與UIPageControl的聯(lián)動(dòng)邏輯,接著就可以得到下圖:


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

好吧绪杏,略丑……
接著是平移explainView下愈,我第一個(gè)思路是想用TouchBegin(Move、End)及手勢(shì)實(shí)現(xiàn)蕾久,但真正操作起來(lái)才發(fā)現(xiàn)這樣代碼繁多势似,并且,完全達(dá)不到想要的效果僧著,思索片刻后找到了另一個(gè)辦法:

        //在explainView的外層再套上一個(gè)ScrollView就可以實(shí)現(xiàn)與gif一模一樣的效果酥筝,完全不需要根據(jù)手指挪動(dòng)的Point來(lái)反復(fù)計(jì)算屋群。
        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)

然后關(guān)聯(lián)explainView與loginView

    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let num = Int(scrollView.contentOffset.x / scrollView.frame.width)
        if num > 0 {
           //當(dāng)explainView消失時(shí)抹除相關(guān)View并且執(zhí)行l(wèi)oginView相關(guān)動(dòng)畫蜂绎,Demo因?yàn)橥祽兴匀渴鞘褂胒rame的死代碼轮听。
            scrollView.removeFromSuperview()
            loginView?.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height / 3)
            loginView?.updateUI()
        }
    }

仔細(xì)觀察gif中的loginView相關(guān)動(dòng)畫,你可以發(fā)覺(jué)背景圖與Logo的相關(guān)效果并不一致杯拐,若背景與Logo存在于同一張圖片上會(huì)讓整張圖片壓扁霞篡,不管是花紋還是logo都會(huì)變成一坨爛泥。
所以實(shí)際上應(yīng)該將背景圖與Logo切分開(kāi)來(lái)端逼,比如這樣:

backgroud.png

Logo.png

(手頭就一張看著靠譜點(diǎn)的載入圖朗兵,好死好活用PS分離開(kāi)來(lái),沒(méi)有花紋還請(qǐng)多加包涵)
這樣顶滩,我們可以大致推測(cè)出實(shí)現(xiàn)代碼余掖,首先,平鋪背景圖的礁鲁,直接裁剪掉大于View的圖片部分盐欺,當(dāng)執(zhí)行縮小動(dòng)畫時(shí)就能保證花紋不被壓縮。接著是Logo仅醇,獨(dú)立存在的LogoView只要在執(zhí)行動(dòng)畫時(shí)根據(jù)比例縮小并且位移即可冗美。

 //當(dāng)說(shuō)明界面消失時(shí)修改登錄界面布局
    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

接下來(lái)是登錄注冊(cè)界面上移,觀察gif我們可以發(fā)現(xiàn)登錄注冊(cè)兩個(gè)按鈕的背景與背景圖一樣析二,即當(dāng)?shù)卿涀?cè)界面上移時(shí)并不是貼合背景圖而是向上挪動(dòng)了一段距離讓兩個(gè)按鈕鑲嵌在背景圖上粉洼。

 //當(dāng)說(shuō)明界面消失時(shí)修改登錄界面布局
    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
            //向上多挪動(dòng)60個(gè)點(diǎn)
            self.loginView?.frame.origin = CGPoint(x: 0, y: self.frame.height - 60)
        }
    }
屏幕快照 2016-08-15 下午7.42.49.png

接下來(lái)設(shè)置按鈕的選中圖片以及與登錄注冊(cè)相關(guān)界面(按鈕與ScrollView聯(lián)動(dòng))的相關(guān)邏輯不多加敘述(其實(shí)是我懶)节预。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市属韧,隨后出現(xiàn)的幾起案子安拟,更是在濱河造成了極大的恐慌,老刑警劉巖宵喂,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糠赦,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡锅棕,警方通過(guò)查閱死者的電腦和手機(jī)愉棱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)哲戚,“玉大人,你說(shuō)我怎么就攤上這事艾岂∷成伲” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵王浴,是天一觀的道長(zhǎng)脆炎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)氓辣,這世上最難降的妖魔是什么秒裕? 我笑而不...
    開(kāi)封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮钞啸,結(jié)果婚禮上几蜻,老公的妹妹穿的比我還像新娘。我一直安慰自己体斩,他們只是感情好梭稚,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著絮吵,像睡著了一般弧烤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蹬敲,一...
    開(kāi)封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天暇昂,我揣著相機(jī)與錄音,去河邊找鬼伴嗡。 笑死急波,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的闹究。 我是一名探鬼主播幔崖,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了赏寇?” 一聲冷哼從身側(cè)響起吉嫩,我...
    開(kāi)封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嗅定,沒(méi)想到半個(gè)月后自娩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡渠退,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年忙迁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碎乃。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡姊扔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出梅誓,到底是詐尸還是另有隱情恰梢,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布梗掰,位于F島的核電站嵌言,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏及穗。R本人自食惡果不足惜摧茴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望埂陆。 院中可真熱鬧苛白,春花似錦、人聲如沸猜惋。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)著摔。三九已至缓窜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谍咆,已是汗流浹背禾锤。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留摹察,地道東北人恩掷。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像供嚎,于是被迫代替她去往敵國(guó)和親黄娘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子峭状,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容