在本節(jié)的視頻Rooms Part 1：Collapsible Navigation Bar里，我們將學(xué)習(xí)如何制作由Facebook出品的《Rooms》App里的可折疊導(dǎo)航欄效果。要實(shí)現(xiàn)的具體效果為：當(dāng)向上滑動的頁面的時(shí)候，導(dǎo)航欄向上變小，兩側(cè)的圖標(biāo)消失；當(dāng)向下滑動的時(shí)候，導(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)整好了它的位置。

添加導(dǎo)航欄圖片.png

接下來把Plus.png這個添加按鈕拖到文檔里，它應(yīng)該處于屏幕畫面的右下角。對準(zhǔn)X Position右邊的數(shù)值“0”，長按后，會變成可左右拖動圖標(biāo)，向左拖動可以減小數(shù)值，向右拖動則是增大數(shù)值。我們可以通過這種方法快速地改變數(shù)值。同時(shí)，對Y Position也做類似的調(diào)整，把這個添加按鈕調(diào)到右下角。

調(diào)整添加按鈕.png

Make it Scroll（讓Feed畫面滾動）

要使畫面可以上下滾動，我們需要使用Scroll模塊。按下Command+回車,打開Patch Library即可搜索得到。找到后，按下回車，添加Scroll模塊。把Feed的Image端口插入到Scroll模塊的Image作為輸入，然后把Scroll的Y Position插入到用于顯示Feed圖片的Layer的Y Position。此時(shí)，你會發(fā)現(xiàn)，右邊的手機(jī)屏幕可以滾動了。

添加滾動效果.png

繼續(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í)完畢再回頭思考時(shí)，再慢慢理會這里的含義。

當(dāng)往上滾動時(shí)，導(dǎo)航欄縮短32px，同時(shí)兩邊的圖標(biāo)也折疊消失了。所以，需要考慮的是，當(dāng)往上滾動32px時(shí)，從目前所在的位置到將滾動到的位置的進(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(shí)候往上滾動了32px，所以End Value設(shè)成-383+32。結(jié)合公式x=（v-s）/（e-s）來看一下，當(dāng)在目前不動的時(shí)候，因?yàn)関=s，Progress的輸出是x=0，當(dāng)往上滾動了32px后，v也變成了-383+32，所以v和e相同，Progress的輸出是x=1。

設(shè)置進(jìn)度模塊.png

接下來，利用這個來改變導(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?；叵胍幌轮皩W(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ìn)度和過渡模塊.png

在手機(jī)屏幕向上滾動，發(fā)現(xiàn)導(dǎo)航欄圖片的高度會不斷減小，我們只是希望折疊32px。這顯然不是我們想要的效果。這是為什么呢？仔細(xì)觀察一下，向上滾動到一定程度的時(shí)候，Transition模塊的輸入口Progress數(shù)值超過1了。雖然只想把導(dǎo)航欄折疊32px，但如果數(shù)值不在0-1之間，就會超過32px了。為了保證數(shù)值在0-1之間，我們引入range（范圍）模塊。添加成功后，把Progress的輸出端口插到Range的Value，把Range的Value插到Transition的輸入口Progress。

添加范圍模塊.png

此時(shí)，再向上滾動屏幕，導(dǎo)航欄的高度只會折疊32px就不再減小，有點(diǎn)接近我們想要的效果了。唯一的小問題是，狀態(tài)欄在向上滾到頂部的時(shí)候，會有部分離開了屏幕，沒有顯示出來 ?？梢酝ㄟ^進(jìn)入Layer Group來修復(fù)這個問題。雙擊Layer Group，進(jìn)入后，可以看到Layer的Anchor Point（錨點(diǎn)）是Center。什么是錨點(diǎn)呢？就是在定位圖層時(shí)相對的那個在圖層容器里的點(diǎn)。錨點(diǎn)是Center的話，導(dǎo)航欄圖片無論怎樣都會把自己相對定位到Layer Group的中心，所以往上滾動的時(shí)候，它會有部分直接滾到頂部以上去了。只需要把錨點(diǎn)改為“Top Center”，這個問題就解決了?，F(xiàn)在，狀態(tài)欄將一直在頂部，往上滾動導(dǎo)航欄也會折疊32px。

改變錨點(diǎn).png

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”。

添加導(dǎo)航欄內(nèi)容.png

這時(shí)，向上滾動手機(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”。

增加折疊進(jìn)度.png

雙擊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模塊，它會幫助我們把效果再反過來?，F(xiàn)在再往上滾動，導(dǎo)航欄兩側(cè)的圖標(biāo)就會逐漸消失，往下滾動，又會逐漸出現(xiàn)了，非常完美。

添加相反進(jìn)度模塊.png

接著，就是隨著往上滾動，把標(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輸入口處。此時(shí)會發(fā)現(xiàn)，當(dāng)導(dǎo)航欄沒有折疊時(shí)，Transition的Progress輸入大致為0，折疊了之后數(shù)值大致為1。而我們希望是導(dǎo)航欄沒有折疊時(shí)，標(biāo)題的Scale較大，折疊了之后自然是Scale變小。所以回顧公式，輸出為s+p*（e-s）（此公式請背得滾瓜爛熟），p為0時(shí)，輸出需要是1，所以s為1；p為1時(shí)，輸出比1小，所以e要比s也就是1小?？梢灾苯釉谖臋n里調(diào)節(jié)e的數(shù)值，直到覺得效果不錯為止?，F(xiàn)在調(diào)到0.88，順便把Y Position調(diào)到-13，效果還可以。終于大功告成啦！

調(diào)整標(biāo)題的大小.png

總結(jié)

本次課程里，有兩點(diǎn)需要加深了解：

• Progress模塊：我們講過，它的作用跟Transition的作用剛好相反，用最淺顯易懂的方式來講，Transition模塊是用來把0和1數(shù)值變成各種其他數(shù)值的，而Progress模塊則是把各種其他數(shù)值變回0和1。有時(shí)得到的數(shù)值超出了0-1的范圍怎么辦？使用Range模塊把這個范圍縮小到0-1之間。
• Transition模塊的輸入若為0，輸出就是Star Value；輸入若為1，輸出就是End Value。而對于Progress模塊，當(dāng)它輸入的值為Star Value，輸出為0；輸入的值為End Value，輸出則為1。請熟記這點(diǎn)，這樣就可以非?？焖俚卦O(shè)置它們對應(yīng)的數(shù)值。
• Layer Group：它是宏模塊，說白了就是里面可以有多個子模塊，它的作用是將若干個子模塊的輸出渲染到同一張圖片里。為什么我們要使用Layer Group呢？在本節(jié)課中，因?yàn)槲覀冃枰瑫r(shí)處理導(dǎo)航欄、里面的標(biāo)題、兩側(cè)的圖標(biāo)，這么多的子模塊需要同時(shí)處理并顯示的時(shí)候，就需要使用到它。

學(xué)習(xí)材料

Origami入門教程5學(xué)習(xí)材料，提取密碼: umn5。這是本節(jié)課的圖片素材和我自己制作的QTZ文件，有興趣的朋友可以自行下載，再自己跟著教程步驟親自做一遍，一定受益匪淺。