Posting（發(fā)布內(nèi)容）#
點擊發(fā)布按鈕，我們想要把新內(nèi)容插入首頁內(nèi)容的頭部棚唆±淳澹回頭看一下首頁信息流的圖層組冗栗，我們可以把它重命名為“Feed Strip”，顯然供搀，它需要增加長度隅居，并把新內(nèi)容容納進(jìn)來。所以葛虐，當(dāng)新內(nèi)容進(jìn)來時胎源，首頁信息流的高度也要隨之變化，而已知這個內(nèi)容框的高度是900屿脐，所以首頁信息流的高度也要增加900涕蚤。把光標(biāo)懸停在Feed Strip的Pixels High，按下鍵盤“t”的诵，添加Transition模塊万栅。當(dāng)按下了Post按鈕，首頁的高度要增加900奢驯，此時Transition模塊的輸入端口Progress數(shù)值一定是1申钩，所以我們先把它設(shè)為1，End Value自然是2100+900瘪阁。再雙擊Feed Strip圖層組進(jìn)入撒遣，把原來信息流的Anchor Point改成Bottom Center，使新內(nèi)容進(jìn)來后原來的頁面定位到底部中心管跺，再把新內(nèi)容的位置Y Position調(diào)為909义黎。這樣，發(fā)布內(nèi)容的位置就設(shè)好了豁跑。
Resizing the Scroll Content（調(diào)整滾動內(nèi)容的大辛椤）#
現(xiàn)在，我們來使首頁信息流以動畫方式來增加高度艇拍，把光標(biāo)懸停在Pixels High Transition模塊的Progress端口上狐蜕，按下鍵盤“a”，添加Pop Animation模塊卸夕。接著层释，需要一個開關(guān)來記住是否發(fā)布了新內(nèi)容的狀態(tài)。按下Post按鈕后快集，才會出現(xiàn)新內(nèi)容贡羔。按下鍵盤“shift+s”廉白，添加Switch模塊，把它插到Pop Animation的Number端口乖寒。不過猴蹂，這時候會發(fā)現(xiàn)，新內(nèi)容的圖層覆蓋了首頁信息流楣嘁，這是因為默認(rèn)狀態(tài)下磅轻，開關(guān)輸出為0，導(dǎo)致Transition模塊的Progress變成了0马澈。最快的修復(fù)方法是瓢省，把新內(nèi)容圖層的順序改為1，讓它在原來的首頁信息流的下面痊班。
然后勤婚，就是讓“Post Button Up”來控制打開開關(guān)了。我們可以復(fù)制粘貼一個“Post Button Up”涤伐，然后把它插到開頭的Turn On端口÷ǎ現(xiàn)在來試一下效果，點擊首頁右下角添加按鈕凝果，進(jìn)入內(nèi)容發(fā)布頁祝迂，點擊右上角發(fā)布按鈕，新內(nèi)容出現(xiàn)了器净。不過型雳，因為我們發(fā)現(xiàn)顯示的時候，動畫是在發(fā)布新內(nèi)容頁面圖層的下方出現(xiàn)的山害，顯然不正確纠俭。
Conditional Logic（條件邏輯）#
想要做到的效果是，新內(nèi)容進(jìn)來時浪慌，原來的首頁會動態(tài)地向下移動冤荆。從實現(xiàn)的角度來考慮，實際上是當(dāng)按下發(fā)布按鈕且發(fā)布內(nèi)容頁離開屏幕后权纤，首頁的高度增加钓简。如何判斷發(fā)布內(nèi)容頁是否離開了屏幕呢？很簡單汹想，只要看它當(dāng)前的Y Position是否小于真正離開屏幕時的Y Position就可以了外邓。這時，我們需要使用Conditional Logic模塊古掏。按下鍵盤“c”坐榆，即可添加到文檔里。把控制Composer圖層Y Positon的Transition模塊的Value插到First Value冗茸。我們看到席镀，當(dāng)真正離開屏幕時，發(fā)布內(nèi)容頁的Y Position是-1341夏漱，所以當(dāng)First Value小于-1340時豪诲，就說明頁面完全離開屏幕了，于是把Second Value設(shè)為-1340挂绰，Condition設(shè)為Lower Than屎篱。順便把Conditional Logic模塊重命名為“Composer is Off Screen”，把上面的開關(guān)命名為“Post Button Was Hit”葵蒂。前面講過交播，當(dāng)按下發(fā)布按鈕且發(fā)布內(nèi)容頁離開屏幕后，再開始動態(tài)地增大首頁的高度践付，把光標(biāo)懸停在Pop Animation的Number端口上秦士，按下鍵盤“shift+a”，添加邏輯模塊AND永高，再把Conditional Logic的Result插到它的輸入口隧土。這時，我們點擊添加按鈕命爬，出現(xiàn)發(fā)布內(nèi)容頁曹傀，點擊發(fā)布，新內(nèi)容就會等到上一頁面離開屏幕再動態(tài)地插入了饲宛。
Fixing the Close Button（修復(fù)關(guān)閉按鈕）#
再次添加按鈕皆愉，出現(xiàn)發(fā)布內(nèi)容頁，點擊關(guān)閉按鈕艇抠，發(fā)現(xiàn)還會插入新內(nèi)容幕庐，這是為什么呢？檢查一下练链，因為當(dāng)Switch被Post Button Up打開了之后翔脱，沒有關(guān)閉，就一直處于打開狀態(tài)媒鼓。應(yīng)該在首頁點擊添加按鈕時届吁，先把這個開關(guān)關(guān)掉。把添加按鈕對應(yīng)的Interaction2模塊的Up端口插到Turn Off就OK了绿鸣。
Delay Patch（延遲模塊）#
我們繼續(xù)做些優(yōu)化疚沐。眼尖的同學(xué)會發(fā)現(xiàn)，在首頁點擊添加按鈕后潮模，可以看到發(fā)布內(nèi)容頁滑上來的同時亮蛔，底下的首頁信息流也將向上滑動變回到原來的高度，在實際正常的交互中擎厢，應(yīng)該給用戶感覺到底部是不變化的究流，只有發(fā)布內(nèi)容頁向上滑辣吃。為了修復(fù)這一點，我們可以把首頁信息流高度恢復(fù)到原來的動畫稍微延遲一些芬探，這樣在發(fā)布內(nèi)容頁上滑出現(xiàn)的時候神得，看上去底部的頁面是不動的。Pop Animation的輸入是AND之后的結(jié)果偷仿，如果發(fā)布按鈕被點擊且發(fā)布內(nèi)容頁離開屏幕哩簿，這個結(jié)果是1，當(dāng)在首頁點擊添加按鈕時酝静，結(jié)果是0节榜。我們是希望只在點擊添加按鈕時，首頁信息流的動畫延遲出現(xiàn)别智，所以是從1減成0時有延遲宗苍。按下鍵盤“d”，添加Delay模塊亿遂，把AND的結(jié)果插到它的Value輸入口浓若，再把它的Value輸出口插到Pop Animation的Number端口。然后蛇数，把Style選擇為Delay Decreasing挪钓，這樣就只有當(dāng)數(shù)值從1減為0時才會有延遲，延遲時間默認(rèn)是0.5秒耳舅。這時碌上，就得到想要的效果了。
