在本節(jié)的視頻Rooms Part 1：Collapsible Navigation Bar里腿时，我們將學(xué)習(xí)如何制作由Facebook出品的《Rooms》App里的可折疊導(dǎo)航欄效果批糟。要實(shí)現(xiàn)的具體效果為：當(dāng)向上滑動的頁面的時候，導(dǎo)航欄向上變小盛末，兩側(cè)的圖標(biāo)消失否淤；當(dāng)向下滑動的時候石抡，導(dǎo)航欄向下拉大，兩側(cè)的圖標(biāo)重新出現(xiàn)净嘀。
現(xiàn)在挖藏，我們打開Quartz Composer厢漩。左上角File-New Origami File溜嗜。在上方工具欄選擇Window-Resize to Thirds，使Editor和Viewer一左一右整齊地排列顯示辟躏。雙擊Layer Group捎琐，進(jìn)入后開始編輯圖片素材裹匙。下載Origami入門教程5材料概页，提取密碼: umn5。先把里面App的主體圖片F(xiàn)eed.png拖到文檔中技掏，再把導(dǎo)航欄圖片Nav Bar.png拖到文檔里。導(dǎo)航欄圖片的位置應(yīng)該處于頂部中間麸塞，雙擊Anchor Point屬性右邊的值，在出現(xiàn)的列表里選擇“Top Center”奥此，導(dǎo)航欄就自動地調(diào)整好了它的位置稚虎。
接下來把Plus.png這個添加按鈕拖到文檔里蠢终，它應(yīng)該處于屏幕畫面的右下角寻拂。對準(zhǔn)X Position右邊的數(shù)值“0”，長按后瞄沙，會變成可左右拖動圖標(biāo)慌核，向左拖動可以減小數(shù)值垮卓，向右拖動則是增大數(shù)值。我們可以通過這種方法快速地改變數(shù)值诬滩。同時碱呼，對Y Position也做類似的調(diào)整宗侦，把這個添加按鈕調(diào)到右下角矾利。
Make it Scroll（讓Feed畫面滾動）
要使畫面可以上下滾動，我們需要使用Scroll模塊欣鳖。按下Command+回車,打開Patch Library即可搜索得到茴厉。找到后矾缓，按下回車，添加Scroll模塊蜕依。把Feed的Image端口插入到Scroll模塊的Image作為輸入样眠，然后把Scroll的Y Position插入到用于顯示Feed圖片的Layer的Y Position翠肘。此時束倍，你會發(fā)現(xiàn)，右邊的手機(jī)屏幕可以滾動了晚碾。
繼續(xù)在屏幕往上滾動至底部格嘁，會發(fā)現(xiàn)下面是黑色的糕簿，這是因?yàn)镕ill Layer的填充顏色是黑色狡孔。長按Color屬性右邊的“Black”苗膝，然后長按著往左滑動，直接到變成“White”离唐，就把Fill Layer改成白色了亥鬓。
Start Collapsing（開始進(jìn)行折疊）
現(xiàn)在嵌戈，我們開始嘗試把導(dǎo)航欄折疊起來。思路是：首先判斷首頁信息流是否往上滾動了32px->如果是宽档，則輸出數(shù)值1->用Transition把1轉(zhuǎn)化為把導(dǎo)航欄縮短32px。初學(xué)的朋友可以先跳過這個思路啊送，等到學(xué)習(xí)完畢再回頭思考時馋没，再慢慢理會這里的含義篷朵。
當(dāng)往上滾動時，導(dǎo)航欄縮短32px笔链，同時兩邊的圖標(biāo)也折疊消失了鉴扫。所以澈缺，需要考慮的是姐赡，當(dāng)往上滾動32px時，從目前所在的位置到將滾動到的位置的進(jìn)程依沮。為了解決這個問題悉抵，需要使用Progress（進(jìn)度）模塊姥饰。添加Progress的步驟就不再贅述了。
Progress是和Transition功能相反的一個模塊审磁。它的輸入是一定范圍內(nèi)的數(shù)值态蒂，并輸出代表著在由Start Value和End Value所定義的某個范圍內(nèi)數(shù)值的進(jìn)度钾恢，這個輸出的數(shù)值在0-1的范圍內(nèi)鸳址。具體來說稿黍，若Value設(shè)為v，Start Value設(shè)為s言沐，End Value設(shè)為e险胰，輸出當(dāng)前的Progress設(shè)為x鸯乃，則x=（v-s）/（e-s）跋涣。實(shí)際上陈辱，可以把Start Value看作是最小值沛贪，End Value則為最大值震贵，輸入的Value可以調(diào)節(jié)由這2個值所決定的范圍猩系。輸出的Progress則是在0到1之間的數(shù)值寇甸，描述了在最小值和最大值之間距離的百分比疗涉。
聽上去有點(diǎn)復(fù)雜咱扣，我們直接來看例子闹伪。把Scroll的Y Position插到Progress的Value端口。把鼠標(biāo)移到Scroll的Y Position停下杀怠，會看到數(shù)值是-383驮肉，也就是Progress的Value輸入的數(shù)值是-383。Start Value則是Layer的Y Position目前的值褪储，這里也是-383慧域。因?yàn)樾枰涝谑裁磿r候往上滾動了32px昔榴，所以End Value設(shè)成-383+32互订。結(jié)合公式x=（v-s）/（e-s）來看一下，當(dāng)在目前不動的時候氮墨，因?yàn)関=s规揪，Progress的輸出是x=0猛铅，當(dāng)往上滾動了32px后，v也變成了-383+32祥款，所以v和e相同月杉，Progress的輸出是x=1刃跛。
接下來，利用這個來改變導(dǎo)航欄的高度苛萎。如果直接用導(dǎo)航欄的Height屬性桨昙，會把導(dǎo)航欄圖片壓扁。而我們想要的是如何能裁剪圖片腌歉。為了做到這點(diǎn)蛙酪，把導(dǎo)航欄圖片放到Layer Group里。把光標(biāo)對準(zhǔn)Nav Bar的Image翘盖，按下鍵盤“g”，就會把它放到了Layer Group里馍驯。雙擊Layer Group阁危，會發(fā)現(xiàn)里面有Nav Bar的Image√保可以看到狂打，Nav Bar的高度是128px混弥。我們希望它有動畫趴乡，能變成128-32px』饶茫回想一下之前學(xué)過的模塊裙品，應(yīng)該引入Transition來完成岁忘。
把光標(biāo)懸停在Layer Group的Pixels Height端口戚篙，按下鍵盤“t”，即可添加連接到這個端口的Transition模塊痛倚。當(dāng)Transition的Progress為0，應(yīng)該是目前的高度128px毕莱，所以Start Value是128px吧黄。當(dāng)Transition的Progress為1廓八，為了最后的輸出是128-32，按之前的公式剂邮，s+p*（e-s）=128+1*\（e-128）=128-32，顯然锯蛀，e=128-32迫像。所以End Value應(yīng)該設(shè)成128-32由缆。
設(shè)置完畢后注祖，我們的直觀感覺自然是把Progress輸出端口和Transition模塊的輸入端口相連猾蒂，馬上來試試看。
在手機(jī)屏幕向上滾動是晨，發(fā)現(xiàn)導(dǎo)航欄圖片的高度會不斷減小婚夫，我們只是希望折疊32px。這顯然不是我們想要的效果署鸡。這是為什么呢案糙？仔細(xì)觀察一下，向上滾動到一定程度的時候靴庆，Transition模塊的輸入口Progress數(shù)值超過1了时捌。雖然只想把導(dǎo)航欄折疊32px，但如果數(shù)值不在0-1之間炉抒，就會超過32px了奢讨。為了保證數(shù)值在0-1之間，我們引入range（范圍）模塊焰薄。添加成功后拿诸，把Progress的輸出端口插到Range的Value，把Range的Value插到Transition的輸入口Progress塞茅。
此時亩码，再向上滾動屏幕，導(dǎo)航欄的高度只會折疊32px就不再減小野瘦，有點(diǎn)接近我們想要的效果了描沟。唯一的小問題是，狀態(tài)欄在向上滾到頂部的時候鞭光，會有部分離開了屏幕吏廉，沒有顯示出來 《栊恚可以通過進(jìn)入Layer Group來修復(fù)這個問題席覆。雙擊Layer Group，進(jìn)入后汹买，可以看到Layer的Anchor Point（錨點(diǎn)）是Center佩伤。什么是錨點(diǎn)呢？就是在定位圖層時相對的那個在圖層容器里的點(diǎn)卦睹。錨點(diǎn)是Center的話畦戒，導(dǎo)航欄圖片無論怎樣都會把自己相對定位到Layer Group的中心方库，所以往上滾動的時候结序，它會有部分直接滾到頂部以上去了。只需要把錨點(diǎn)改為“Top Center”纵潦，這個問題就解決了⌒旌祝現(xiàn)在垃环，狀態(tài)欄將一直在頂部，往上滾動導(dǎo)航欄也會折疊32px返敬。
Animating Nav Bar Content（對導(dǎo)航欄內(nèi)容進(jìn)行動畫處理）
接下來遂庄，我們先給導(dǎo)航欄增加內(nèi)容，然后對它兩邊的圖標(biāo)進(jìn)行動畫處理劲赠。
把課程最后附件材料里的Title圖片拖進(jìn)Layer Group的里面涛目，稍微調(diào)整一下這個圖片對應(yīng)Layer的Y Position， 使它在導(dǎo)航欄內(nèi)基本居中凛澎。再把關(guān)閉按鈕拖進(jìn)來霹肝，把它對應(yīng)Layer的錨點(diǎn)改為“Bottom Left”。然后添加更多按鈕塑煎，把它對應(yīng)Layer的錨點(diǎn)改為“Bottom Right”沫换。
這時，向上滾動手機(jī)屏幕最铁，會發(fā)現(xiàn)導(dǎo)航欄兩側(cè)的圖標(biāo)覆蓋了狀態(tài)欄讯赏。我們實(shí)際想要的效果是，兩側(cè)的圖標(biāo)隨著導(dǎo)航欄的折疊冷尉，逐漸地消失漱挎。為了達(dá)到這個效果，我們需要把外面對進(jìn)度數(shù)值有限制的Range模塊雀哨，接到這兩個圖標(biāo)的Opacity（不透明度）端口识樱，以控制它們的顯示。
把Range的Clipped Value端口拉到Layer Group內(nèi)部然后松手震束，就能增加它作為Layer Group的輸入怜庸，我們把其命名為“Collapse Progress”。
雙擊Layer Group進(jìn)入垢村，可以看到Collapse Progress模塊割疾。把它插到兩個圖標(biāo)Layer的Opacity端口，會發(fā)現(xiàn)嘉栓，默認(rèn)不顯示導(dǎo)航欄的兩側(cè)圖標(biāo)宏榕，只有向上滾動才會顯示，這跟我們想實(shí)現(xiàn)的效果剛好相反侵佃。把光標(biāo)懸停在Collapse Progress麻昼，點(diǎn)擊鍵盤“r”，就會添加Reverse Progress模塊馋辈，它會幫助我們把效果再反過來「現(xiàn)在再往上滾動，導(dǎo)航欄兩側(cè)的圖標(biāo)就會逐漸消失，往下滾動叉抡，又會逐漸出現(xiàn)了尔崔，非常完美。
接著褥民，就是隨著往上滾動季春，把標(biāo)題變小。顯然消返，應(yīng)該對標(biāo)題對應(yīng)Layer的Scale屬性作文章载弄。因?yàn)镾cale應(yīng)該不是單純的0或1，那么怎么才能把Collapse Progress的輸出與Layer的Scale聯(lián)系起來呢撵颊？當(dāng)然是引入Transition模塊侦锯。把光標(biāo)懸停在Layer的Scale處，按下鍵盤“t”秦驯，添加Transition尺碰。把Collapse Progress的輸出口插到Transition的Progress輸入口處。此時會發(fā)現(xiàn)译隘，當(dāng)導(dǎo)航欄沒有折疊時亲桥，Transition的Progress輸入大致為0，折疊了之后數(shù)值大致為1固耘。而我們希望是導(dǎo)航欄沒有折疊時题篷，標(biāo)題的Scale較大，折疊了之后自然是Scale變小厅目。所以回顧公式番枚，輸出為s+p*（e-s）（此公式請背得滾瓜爛熟），p為0時损敷，輸出需要是1葫笼，所以s為1；p為1時拗馒，輸出比1小路星，所以e要比s也就是1小∮展穑可以直接在文檔里調(diào)節(jié)e的數(shù)值洋丐，直到覺得效果不錯為止。現(xiàn)在調(diào)到0.88挥等，順便把Y Position調(diào)到-13友绝，效果還可以。終于大功告成啦肝劲！
總結(jié)
本次課程里迁客，有兩點(diǎn)需要加深了解：
- Progress模塊：我們講過郭宝，它的作用跟Transition的作用剛好相反，用最淺顯易懂的方式來講哲泊，Transition模塊是用來把0和1數(shù)值變成各種其他數(shù)值的剩蟀，而Progress模塊則是把各種其他數(shù)值變回0和1催蝗。有時得到的數(shù)值超出了0-1的范圍怎么辦切威？使用Range模塊把這個范圍縮小到0-1之間。
- Transition模塊的輸入若為0丙号，輸出就是Star Value先朦；輸入若為1，輸出就是End Value犬缨。而對于Progress模塊喳魏，當(dāng)它輸入的值為Star Value，輸出為0怀薛；輸入的值為End Value刺彩，輸出則為1。請熟記這點(diǎn)枝恋，這樣就可以非炒淳螅快速地設(shè)置它們對應(yīng)的數(shù)值。
- Layer Group：它是宏模塊焚碌，說白了就是里面可以有多個子模塊畦攘，它的作用是將若干個子模塊的輸出渲染到同一張圖片里。為什么我們要使用Layer Group呢十电？在本節(jié)課中知押，因?yàn)槲覀冃枰瑫r處理導(dǎo)航欄、里面的標(biāo)題鹃骂、兩側(cè)的圖標(biāo)台盯，這么多的子模塊需要同時處理并顯示的時候，就需要使用到它畏线。
學(xué)習(xí)材料
Origami入門教程5學(xué)習(xí)材料爷恳，提取密碼: umn5。這是本節(jié)課的圖片素材和我自己制作的QTZ文件象踊，有興趣的朋友可以自行下載温亲，再自己跟著教程步驟親自做一遍，一定受益匪淺杯矩。
