根據(jù)官網(wǎng)上的視頻教學(xué)，開(kāi)始了Origami的學(xué)習(xí)岖沛。教學(xué)是以一個(gè)類(lèi)似Facebook的社交App的時(shí)間軸界面為例子溉浙，首先拖拽圖片，自動(dòng)生成一個(gè)圖片圖層馆蠕，接下來(lái)插入一個(gè)ScrollPatch惊奇，直接連接圖片的圖層就實(shí)現(xiàn)了滾屏的效果。然后就是添加剩余的界面元素吼渡，按照設(shè)計(jì)稿的位置排布乓序。
因?yàn)檫@個(gè)教程的交互比較簡(jiǎn)單坎背，就沒(méi)有考慮到交互添加的順序問(wèn)題得滤，基板上是按照從底層到上層懂更，從上往下的順序急膀。想必在設(shè)計(jì)比較復(fù)雜的界面時(shí)要考慮得更完善一些。
首先做的是標(biāo)題欄的收縮慷暂，這個(gè)交互的邏輯是命黔，首先用Transition設(shè)定標(biāo)題欄要收縮的高度（32px），再取時(shí)間軸圖片滾動(dòng)時(shí)的Y坐標(biāo)，用Progress同樣設(shè)定32px的距離洋机，連接到標(biāo)題欄的Transition绷旗，發(fā)現(xiàn)標(biāo)題欄會(huì)完全消失，這是由于沒(méi)有限定Transition的值導(dǎo)致超過(guò)1庄岖，然后在滾動(dòng)的Progress和標(biāo)題欄的Transition之間加一個(gè)Range角骤，限定為0～1的值，效果達(dá)成背桐。對(duì)于標(biāo)題欄上的文字和按鈕蝉揍，將Range的輸出直接連到標(biāo)題欄組的模塊上，會(huì)生成一個(gè)新的節(jié)點(diǎn)弊仪，在標(biāo)題欄組里將這個(gè)節(jié)點(diǎn)分別連上文字和按鈕的Scale和Opacity過(guò)程，就完成了驳癌。測(cè)試時(shí)發(fā)現(xiàn)頂部狀態(tài)欄會(huì)被截掉曲横，這是由于標(biāo)題欄組的對(duì)齊錨點(diǎn)在中心喂柒，改成頂部居中灾杰，問(wèn)題解決艳吠。
其余的兩個(gè)交互動(dòng)作分別是：首頁(yè)點(diǎn)擊某張照片彈出詳情頁(yè)孽椰；發(fā)布新?tīng)顟B(tài)。第一個(gè)效果是先添加一個(gè)HitArea黍匾，再添加Interacion，講Tap節(jié)點(diǎn)連接到使詳情頁(yè)出現(xiàn)的Swipe動(dòng)作上面磕诊，同時(shí)添加首頁(yè)的漸進(jìn)漸出效果纹腌。
第二個(gè)效果是最復(fù)雜的，分為兩部分莱褒，一是點(diǎn)擊加號(hào)按鈕彈出新?tīng)顟B(tài)編輯頁(yè)面涎劈，這個(gè)比較好做，用Interacion連接兩個(gè)元素炮障，記得要用Switch來(lái)保證彈出后不會(huì)消失坤候。二是點(diǎn)擊編輯頁(yè)面的Post按鈕后，編輯頁(yè)退出智末，首頁(yè)下降一定的高度，留出空白系馆，接著新發(fā)布的狀態(tài)出現(xiàn)。過(guò)程是闽寡，先給編輯頁(yè)的兩個(gè)按鈕加上HitArea尼酿，是用w快捷鍵添加Wireless模塊，再在上一層添加WirelessReceiver涎永，用Logic模塊設(shè)定按兩個(gè)按鈕之一都能使編輯頁(yè)關(guān)閉鹿响；接下來(lái)添加點(diǎn)擊Post按鈕時(shí)新?tīng)顟B(tài)出現(xiàn)的效果惶我，并且將首頁(yè)的高度增加900px（正是新?tīng)顟B(tài)需要的高度）以留出空白。此時(shí)發(fā)現(xiàn)绸贡，留出空白和新?tīng)顟B(tài)出現(xiàn)是同時(shí)的，并沒(méi)有先后順序，這就需要復(fù)制這個(gè)動(dòng)畫(huà)模塊叉跛，并且使用Delay模塊延遲新?tīng)顟B(tài)的出現(xiàn)蒸殿，達(dá)到效果。
最后一個(gè)效果是現(xiàn)在還沒(méi)完全弄懂的宏所，只是照著做爬骤。就是當(dāng)新?tīng)顟B(tài)增加了之后，標(biāo)題欄并沒(méi)有按照原先設(shè)定的高度進(jìn)行收縮骤铃，需要進(jìn)行調(diào)整。首先復(fù)制原先讓標(biāo)題欄收縮的Progress模塊喊暖，同樣連接上Scroll模塊的Y坐標(biāo)節(jié)點(diǎn)，將Start和EndValue改成添加新?tīng)顟B(tài)后的坐標(biāo)值和坐標(biāo)值＋32陵叽，將初始首頁(yè)連接Transition的StartValue巩掺，將添加后的首頁(yè)連接EndValue硼婿，Progress連接留出空白的動(dòng)畫(huà)模塊，效果達(dá)成寇漫。
此外州胳，我覺(jué)得Origami中有些概念比較關(guān)鍵，比如0和1的概念栓撞，0表示關(guān)閉、無(wú)效果瓢颅，1表示打開(kāi)弛说、有效果。很多時(shí)候都需要用到這個(gè)思路木人。還有一些技巧醒第，比如按住Option拖移模塊和連接線可以復(fù)制；連接操作模塊和圖層可以只對(duì)該圖層進(jìn)行操作形病。
