下載教程文件**
·····密碼: ahgt**
選擇對應(yīng)名稱的文件夾下載蓖康，內(nèi)包含一個（開始）和一個（已完成）文件慌植；（開始）文件用來和教程同步操作，（已完成）是最終結(jié)果。
Create screen flows. 創(chuàng)建屏幕切換流程
Creating screen flows in Origami is easier than you might think, and still allows for some more complex interactions within screens.
在 Origami 中創(chuàng)建屏幕流程比你想的要容易得多要销，并且仍然允許在屏幕內(nèi)進(jìn)行復(fù)雜的交互。
We are going to recreate the Instagram Boomerang interface, with scrolling behavior in one of the screens. It even has some of the more advanced iOS behavior such as offset as the screen moves.
本篇教程將搭建 Instagram Boomerang 的界面夏块，其中一個頁面還有滾動疏咐。甚至有一些高級的 iOS 行為纤掸，如屏幕移動時的偏移。
Screen 屏幕
The starting tutorial files have three Screen layers set up already. If you need to add more, click on the New Layer button Shift Cmd N and type to find Screen.
教程文件中已經(jīng)創(chuàng)建三個屏幕層了浑塞。如果需要添加更多屏借跪，按 Shift Cmd N 打開新圖層下拉框，在控件類圖層中找到 Screen 點擊添加酌壕。
Screen start state 屏幕的啟動狀態(tài)
Screens are presented by default, so right now, they are stacked on top of each other. Click Screen Share and change the Start State to Dismissed.
屏幕默認(rèn)情況下是顯示掏愁，所有的屏幕都重疊在一起。選中 Screen Share 圖層卵牍，將屬性 Start State 的值改為 Dismissed果港。
Restart the prototype by clicking on the Restart Prototype button in the Viewer toolbar, and then repeat the process for Screen Boomerangs; click on the Screen Boomerangs layer, change the Start State to Dismissed, and then click the Restart Prototype button.
點擊查看器工具欄中的 “重啟” 按鈕重啟原型。
然后將 Screen Boomerangs 圖層的屬性 Start State 的值也改為 Dismissed糊昙。重啟原型辛掠。
The last screen is Screen Main. It is a regular Group layer since it is not going anywhere.
最后一個屏是 Screen Main萝衩。一個常規(guī)的組層，因為它不會去任何地方没咙。
Linking screens 連接屏幕
The first screen transition is from Screen Main to Screen Boomerangs. We need a Hit Area to take us there.
第一個跳轉(zhuǎn)是從 Screen Main 跳轉(zhuǎn)到 Screen Boomerangs欠气。我們需要點擊一個點擊區(qū)域來啟動跳轉(zhuǎn)。
A Hit Area named Open Boomerangs exists within Screen Main, covering the thumbnail in the Viewer. Make it interactive by hovering over Open Boomerangs, clicking on Touch, then clicking on Tap.
Screen Main 組內(nèi)有一個名為 Open Boomerangs 的熱區(qū)镜撩，覆蓋在查看器中的縮略圖上。給這個熱區(qū)加一個 Tap 交互模塊队塘。
Connect the Tap output of the Open Boomerangs Hit Area to the Present property of Screen Boomerangs. Tapping the thumbnail in Screen Main should now open Screen Boomerangs.
將交互模塊的 Tap 輸出口連接到 Screen Boomerangs 圖層的狀態(tài)屬性 Present 上袁梗。
We don't need to add any Switch, Pop Animation, or Transition patches, because Screen handles all of this for us.
不用添加 Switch、Pop animation 和 Transition 模塊憔古，因為 Screen 包含了這仨呢遮怜。
Linking back 返回的連接
The next thing we need is a way to get back to our Screen Main. A Hit Area named Dismiss Boomerangs has already been created for this purpse, inside of Screen Boomerangs.
下一步還得瞅瞅咋回到 Screen Main 頁面。Screen Boomerangs 內(nèi)部已經(jīng)創(chuàng)建了一個命名為 Dismiss Boomerangs 的熱區(qū)鸿市。
Like before, make that interactive by hovering over Dismiss Boomerangs, clicking on Touch, and then clicking Tap.
跟上一步一樣锯梁，給這個熱區(qū)加一個 Tap 交互。
Our new Interaction patch is going to affect Screen Boomerangs. Click and drag on the Tap of the new Interaction patch and connect it to Dismiss Screen Boomerangs.
這個新的 Interaction 模塊將會影響 Screen Boomerangs 圖層焰情。點擊并拖動新 Interaction 模塊的 Tap 輸出口連接到 Screen Boomerangs 圖層的狀態(tài)屬性 Dismiss陌凳。
Now tapping on the cross in our prototype should take us back to Screen Main, and clicking on the thumbnail should take us to Screen Boomerangs.
現(xiàn)在點擊關(guān)閉按鈕應(yīng)該會回到 Screen Main，點擊縮略圖再次打開 Screen Boomerangs内舟。
Changing transitions types 改變過渡類型
One minor detail is that the Boomerangs actually come out from the side in this prototype, whereas in the real app they come from the bottom. Screens in Origami support both of these transition types.
一個小細(xì)節(jié)合敦，在這個原型中 Screen Boomerangs 頁面是從右像左顯示，而在真實的應(yīng)用中是從下往上顯示验游。Origami 支持這兩種切換類型充岛。
Go to the Transition property of our Screen Boomerangs and it from from Push to Modal.
選中 Screen Boomerangs 圖層保檐，將屬性 Transition 的值從 Push 改為 Modal。
Now clicking on the thumbnail should bring Screen Boomerangs up from the bottom, and tapping on the cross should bring Screen Boomerangs back down.
再試著點擊一下崔梗，Screen Boomerangs 從下往上顯示夜只，從上往下關(guān)閉。
Finishing the flow 整理流程
Our last Screen is a closer look at the first thumbnail, called Screen Share. Like before, a Hit Area has already been prepared for this, called Open Share.
最后一個屏幕叫 Screen Share 蒜魄，是放大列表中的第一個圖扔亥。跟前面一樣，已經(jīng)有一個叫 Open Share 的熱區(qū)权悟，在 Screen Boomerangs 下的 Boomerangs 組內(nèi)砸王。
Add this Screen to our flow by hovering over Open Share, clicking on Touch, and then clicking on Tap. Like before, connect the Tap output of this to Present Screen Share.
給熱區(qū) Open Share 添加一個 Tap 交互。將 Tap 輸出口連接到 Screen Share 圖層的 Present 屬性峦阁。
Tapping on the first thumbnail should now take us to the Share Screen. The last screen transition we want to add is returning back to Screen Boomerangs.
點擊第一張圖現(xiàn)打開 Screen Share 谦铃。最后要在 Screen Share 頁面上添加一個返回到 Screen Boomerangs 頁面的交互。
Again we've already set up a Hit Area for this under Screen Share called Dismiss Share. Hover over Dismiss Share, click Touch, and then click Tap. Connect the Tap output of this new Interaction to Dismiss Screen Share.
找到 Screen Share 組內(nèi)名為 Dismiss Share 的熱區(qū)榔昔，給這個熱區(qū)添加 Tap 交互驹闰，連接到 Screen Share 的 Dismiss 屬性。
Interaction within screens 屏幕間的交互
We should have our whole screen flow worked out now. Anything we want to do within screens is just as easy.
整個流程就完成了撒会。想在屏幕里添加其他的交互也很簡單嘹朗。
For example, we can make the Boomerangs grid scrollable. The Boomerangs layer itself goes beyond the height of the Viewer, with a few more thumbnails.
例如，讓 Boomerangs 頁面的列表可以滾動诵肛。Boomerangs 組的高度需要超出屏幕屹培。
Open Screen Boomerangs in the Layers panel. Hover over the Boomerangs layer, click on Touch, and then click Scroll Y.
展開圖層窗口中的 Screen Boomerangs 組。給 Boomerangs 圖層添加 Scroll Y 交互怔檩。
Offset 偏移
Offset within screen transitions is a standard iOS Push transition behavior, however not crucial to creating screen flows. To create an offset in this prototype we need to first know what the Screen Share offset is.
屏幕切換過程中的偏移是標(biāo)準(zhǔn)的 iOS 轉(zhuǎn)換行為褪秀，但對創(chuàng)建屏幕流程沒有影響，只是一些細(xì)節(jié)性的??東西薛训。
板栗：那偏移到底是啥呢媒吗，先完成下面的操作，最后再對比一下就知道了乙埃。
Hover over Screen Share, click on Touch, and then click the X Offset output.
給 Screen Share 圖層組添加一個 X Offset 交互闸英。
You might offset change as we go between the two screens. Connect this outputted value to the X Offset property of the Screen Boomerangs by clicking and dragging into the Layers panel.
將 X Offset 模塊的輸出口連接到 Screen Boomerangs 模塊的 X Offset 屬性介袜。
Now when we go between screens, the outputted Screen Share Offset affects the Screen Boomerangs Offset input too.
現(xiàn)在甫何，從 Screen Boomerangs 頁面打開 Screen Share 頁時，除了 Screen Share 頁面是從右往左打開遇伞，下面的 Screen Boomerangs 頁面也會有一個從右往左退出的動畫沛豌，但是運(yùn)動幅度要比上面的頁面小。
板栗：可以斷開兩個 X Offset 的連接打開-關(guān)閉，再連接上兩個 X Offset 打開-關(guān)閉加派，對比一下就知道區(qū)別了叫确。
相關(guān)教程
5. 滾動 Scrolling Views
滾動頁面。
9. 多個狀態(tài)切換 Multiple States
在兩個以上的狀態(tài)之間切換芍锦，如 Tab 欄竹勉。
相關(guān)案例
18. Instagram Boomerang
屏幕和滾動之間的轉(zhuǎn)換。
相關(guān)模塊
Interaction Scroll
相關(guān)圖層
Hit Area Screen
NEXT UP
Timed Animations 延時動畫
