Staggered Animation（交錯動畫）#
在講交錯動畫之前，先補充一下視頻里不知道為什么忽略沒講的部分，可能是剪輯時漏掉了。在點擊了發(fā)布按鈕后，新內容應該是在中心向四周從小到大地動態(tài)出現(xiàn)的，這顯然需要通過Pop Animation的Progress來控制新內容圖層的Opacity和Scale。怎么把外面的Pop Animation的Progress接到圖層組里的新內容頁面呢？很簡單，把它直接插入Layer Group的輸入，松開手，就會給圖層組添加了Progress的輸入口。雙擊進入圖層組，會發(fā)現(xiàn)多了一個Progress模塊，可以把它重命名為Expand Progress。把它插到Post圖片的Opacity和Scale，就可以得到希望的效果。
接著開始交錯動畫。如果點擊了發(fā)布按鈕后，首頁信息流先下滑空出白色區(qū)域，然后再動態(tài)地出現(xiàn)新內容，這樣的交互是不是更有張力？馬上來試一下。想要做到這一點，需要對Expand Progress進行延遲處理。這等于是在首頁動畫延遲后，再對它進行延遲，所以另外各添加一個Delay和Pop Animation模塊，把原來Delay的Value輸出口插到新的Delay的Value輸入口上，再把新的Delay的Value輸出口插到新的Pop Animation的Number上，最后把Progress輸出口插到Layer Group的輸入口。點擊發(fā)布按鈕，其實是從0變成了1，所以此時新的Delay模塊的Style應該設為Delay Increasing。順便可以把原來的Pop Animation命名為“Feed Sliding”，新的則命名為“Post Scaling”。交錯動畫的效果就實現(xiàn)了。
Fixing the Navigation Bar Collapsing（修復導航欄折疊）#
添加新內容后，向上滑動首頁，發(fā)現(xiàn)要滑動一定距離導航欄才開始折疊。這是因為之前我們設置折疊的Y Position數(shù)值只適用于沒有增加高度的情況，現(xiàn)在增加了新內容后，高度增加了，自然就不對了。所以，只要對高度增加后再設置相應的數(shù)值就可以。復制一個Progress，把Scroll的Y Position插到它的Value輸入口，我們可以看到，插入新內容后，值為-833，所以這個Progress的Star Value設為-833，End Value為-833+32。同時，把之前的Progress模塊命名為“Shorter Feed”，現(xiàn)在這個命名為“Taller Feed”。
如果是原來的首頁高度，使用“Shorter Feed”，否則使用“Taller Feed”?！癋eed Sliding”可以告訴我們這一點，如果輸出的值是0，那么是短的首頁，如果輸出值是1，那么是長的首頁。這里，我們把這個輸出值輸入到一個新的Transition模塊。當Transition的輸入為0，那么輸出是Star Value；當它的輸入為1，則輸出End Value。新增Transition模塊，把“Feed Sliding”的Progress插到它的Progress端口，“Shorter Feed”的Progress插到Star Value，“Taller Feed”的Progress插到End Value，再Transition的Value插到Range的Value端口，就沒問題了。
Final Polish（收尾工作）#
最后再來看看需要完善的地方。在首頁點擊右下解添加按鈕，此時彈出發(fā)布頁面，這個動畫感覺彈跳得過于夸張，可以把它對應的Bounciness設為1，Speed改成5，就正常多了。
接下來是就是去掉點擊區(qū)域的紅色覆蓋層。雙擊進入Composer，把Hit Area的Setup Mode的勾消掉就可以了。
還有一個問題，就是新內容顯示在首頁時，底部的內容不見了。雙擊進入Feed Strip檢查一下，這是因為剛才我們把新內容的圖片放在了舊首頁黑圖層的下方了?，F(xiàn)在我們已經(jīng)控制了新內容的Scale，所以不需要再把它放到下方也會顯示正確，只需把它放到舊首頁圖層的上方，就解決問題。把它改為Layer3，再試一下，大功告成。
總結#
- 體會Switch模塊的用法，當需要記住某個狀態(tài)時，就要考慮使用它。
- 理解Interaction 2模塊幾個輸出端口的具體用法。
- 圖層組里的模塊需要與外面的模塊進行通信時，可以使用“Wireless Broadcast”和“Wireless Receiver”這對模塊。
- 使用Delay模塊可以實現(xiàn)有時間差的動畫。
- 實現(xiàn)主要交互后，注意可能需要修復某些問題。
學習材料#
Origami入門教程7材料，提取密碼: qzmm。這個視頻的內容較多，大家可以下載練習一下，加深理解。
至此，F(xiàn)acebook官方出品的教學視頻就講解完了。之后會和大家一起探討我自己做的小例子，歡迎繼續(xù)關注。
