在本節(jié)的視頻Rooms Part 3： Creating a New Post里，我們將在上次課程的基礎(chǔ)上，繼續(xù)制作創(chuàng)建新內(nèi)容的交互。因?yàn)橐曨l較長，將會分成上、中、下三次課程和大家一起學(xué)習(xí)。最后希望達(dá)到的效果是：點(diǎn)擊首頁右下角的添加按鈕，從下往上彈出發(fā)表新內(nèi)容的頁面，在這個頁面上，點(diǎn)擊關(guān)閉按鈕，可以回到首頁；點(diǎn)擊發(fā)表，則新內(nèi)容會以柔和的動畫插進(jìn)首頁的頭部。
首先，請下載Origami入門教程7材料，提取密碼: qzmm。我們先給添加按鈕加動畫。一般來說，按下按鈕后，按鈕應(yīng)該有一定的變化，我們這里希望按下添加按鈕，它會動態(tài)地變小一些。先添加Interaction 2模塊，把它插到添加按鈕的Layer上，使它只作用在添加按鈕的圖層上。想要有動畫很簡單，把光標(biāo)懸停在Interaction 2模塊的Down端口上，按下鍵盤“a”，就添加了Pop Animation模塊。此外，我們需要控制一下按鈕大小變化的范圍，顯然，添加Transition模塊就可以了。把光標(biāo)懸停在Pop Animation模塊的Progress端口上，按下鍵盤“t”，即添加成功。接下來，把Transition模塊的Value插到添加按鈕Layer的Scale端口上。沒按下按鈕的時候，Down輸出是0，也就是Transition模塊的Progress值為0，此時按鈕應(yīng)該以最大的尺寸顯示，所以Transition的Star Value應(yīng)該設(shè)為1。按下按鈕后，Down輸出是1，也就是Transition模塊的Progress值為1，此時希望按鈕變小一些，可以把End Value設(shè)為0.8。這樣，按下按鈕后，它會動態(tài)地變?yōu)樵瓉泶笮〉?0%。如果覺得動畫的彈力不夠，把Pop Animation模塊的bounciness改大一些就可以了。這里設(shè)為10，感覺還不錯。
Creating a New Post（添加發(fā)布窗口）#
現(xiàn)在我們開始添加發(fā)布窗口。先把材料里的Composer.png拖進(jìn)文檔里。我們希望是，當(dāng)點(diǎn)擊了添加按鈕后，這個頁面才顯示，所以肯定需要控制Y Position的數(shù)值。把光標(biāo)移到這個圖片對應(yīng)的Layer模塊的Y Position端口，按下鍵盤“t”，添加Transition模塊。沒有點(diǎn)擊按鈕的時候，需要把這個頁面移到下方看不到的地方，調(diào)整Star Value的數(shù)值，這里設(shè)為-1341就差不多了。當(dāng)按下添加按鈕時，頁面應(yīng)該出現(xiàn)，因?yàn)檫@時Progress輸入為1，所以End Value要設(shè)為0，最后輸出才會為0，顯示整個頁面。當(dāng)顯示這個頁面時，也需要動畫效果，所以光標(biāo)懸停在Transition模塊的Progress端口，按下鍵盤“a”，添加Pop Animation模塊。根據(jù)我們的需求，是否點(diǎn)擊添加按鈕會有不同的狀態(tài)，顯然，我們需要一個開關(guān)來判斷手指是不是在屏幕上，當(dāng)手指離開了屏幕，才彈出這個頁面。把光標(biāo)懸停在Pop Animation模塊的Number端口，按下鍵盤“shift+s”，添加Switch模塊。為了之后能更清晰地理解它，我們可以對它重命名為“Composer is Visible”。接下來，就讓按鈕打開這個開關(guān)。
在控制開關(guān)之前，我們來深入認(rèn)識一下Interaction 2模塊的幾個輸出端口。Down端口在按下圖層時會輸出1，否則輸出0，用在需要判斷按下狀態(tài)的情況；Up端口在圖層被松開時會輸出1，適用于使用按鈕的情況；Tap端口在圖層在固定位置輕按時會輸出1，適用于按鈕處在可滾動圖層上的情況;Drag端口則在被按下直到松開的整個過程中都會輸出1。這里，我們只需要使用Up端口。把它插到Switch模塊的Flip端口，然后再點(diǎn)擊添加按鈕，松手后，發(fā)布頁面就從下往上彈出來了。
Going Back（返回）#
點(diǎn)擊發(fā)布頁面左上角的交叉按鈕和右上角的Post按鈕，都希望可以返回到首頁信息流。這就要求點(diǎn)擊這兩個按鈕后，可以把Switch模塊代表的開關(guān)關(guān)閉掉。顯然，我們需要在這兩個按鈕上添加Hit Area。因?yàn)辄c(diǎn)擊區(qū)域和這個頁面是永遠(yuǎn)一起顯示的，所以需要把它們放在圖層組里。把光標(biāo)懸停在Composer這個Image上，按下鍵盤“g”，把這個Layer Group再雙擊進(jìn)入圖層組，按下鍵盤“h”，添加Hit Area。將Anchor Point設(shè)為Top Left，Width和Height分別調(diào)節(jié)為139和187。再復(fù)制粘貼一個Hit Area，Anchor Point設(shè)為Top Right。這樣，兩個點(diǎn)擊區(qū)域都設(shè)置完成了。接著，把光標(biāo)懸停在Hit Area的輸入口，按下鍵盤“i”，分別都添加上Interaction 2模塊。
我們希望把Up口與外面的Switch模塊相連，按之前課程講過的，可以對準(zhǔn)Up口按下鍵盤“p”，把這個端口放到外面去。在這里，向大家介紹另一種有用的方法。在Origami里，有一個新模塊叫“Wireless Broadcast”，它能夠以無線方式把數(shù)值傳遞到文檔里任一模塊。把光標(biāo)懸停在Up端口，按下鍵盤“w”。雙擊它重命名為“Close Button Up”。同樣的方法，添加“Post Button Up”。
返回上一層，我們看不到哪里有顯示跟這個無線模塊有關(guān)的東西。按下鍵盤“shift+w”，發(fā)現(xiàn)添加了一個“Wireless Receiver”模塊，用它就能接收剛才設(shè)置的兩個發(fā)送器的數(shù)值。按下鍵盤“command+2”，進(jìn)入它的設(shè)置，選擇需要接收的發(fā)送器名字。先選擇“Close Button Up”發(fā)送器，把它插到Switch模塊的Off端口。此時在右邊的手機(jī)屏幕上點(diǎn)擊左上角交叉按鈕，頁面就從上往下收回了。
Logic Patch（邏輯模塊）#
同樣，我們再設(shè)一個“Wireless Receiver”模塊來接收Post Button Up的數(shù)值。不過，當(dāng)嘗試把它插到Switch模塊的Off端口時會發(fā)現(xiàn)，剛才連接“Close Button Up”接收器的線不見了。這是因?yàn)椴辉试S同時有2根線插到同一個端口。解決這個問題的方法就是使用Logic Patch（邏輯模塊）。按下鍵盤“shift+a”，就成功添加了一個邏輯模塊。雙擊此模塊，可以發(fā)現(xiàn)，它有AND、OR、NOT也就是與、或、非等多種邏輯可選，我們用得最多也就是這三種了。我們是想按下關(guān)閉或者發(fā)布按鈕，這個頁面都往下彈走，所以這里應(yīng)該選擇OR。把這兩個接收器插入到邏輯模塊的輸入口，再把邏輯模塊的輸出口插到Switch模塊的Off端口，就可以了。
