下載教程文件** ·····密碼: ahgt**

選擇對應名稱的文件夾下載，內包含一個（開始）和一個（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結果。

Create screen flows. 創建屏幕切換流程

Creating screen flows in Origami is easier than you might think, and still allows for some more complex interactions within screens.

在 Origami 中創建屏幕流程比你想的要容易得多，并且仍然允許在屏幕內進行復雜的交互。

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.

教程文件中已經創建三個屏幕層了。如果需要添加更多屏，按 Shift Cmd N 打開新圖層下拉框，在控件類圖層中找到 Screen 點擊添加。

Screen start state 屏幕的啟動狀態

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.

屏幕默認情況下是顯示，所有的屏幕都重疊在一起。選中 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。重啟原型。

You should now see Screen Main by default, with all other screens hidden. 現在應該能看到默認屏 Screen Main ，其他屏被隱藏了。

The last screen is Screen Main. It is a regular Group layer since it is not going anywhere.

最后一個屏是 Screen Main。一個常規的組層，因為它不會去任何地方。

Linking screens 連接屏幕

The first screen transition is from Screen Main to Screen Boomerangs. We need a Hit Area to take us there.

第一個跳轉是從 Screen Main 跳轉到 Screen Boomerangs。我們需要點擊一個點擊區域來啟動跳轉。

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 組內有一個名為 Open Boomerangs 的熱區，覆蓋在查看器中的縮略圖上。給這個熱區加一個 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 圖層的狀態屬性 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 內部已經創建了一個命名為 Dismiss Boomerangs 的熱區。

Like before, make that interactive by hovering over Dismiss Boomerangs, clicking on Touch, and then clicking Tap.

跟上一步一樣，給這個熱區加一個 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 圖層的狀態屬性 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.

現在點擊關閉按鈕應該會回到 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.

一個小細節，在這個原型中 Screen Boomerangs 頁面是從右像左顯示，而在真實的應用中是從下往上顯示。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 從下往上顯示，從上往下關閉。

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 ，是放大列表中的第一個圖。跟前面一樣，已經有一個叫 Open Share 的熱區，在 Screen Boomerangs 下的 Boomerangs 組內。

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.

給熱區 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.

點擊第一張圖現打開 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 組內名為 Dismiss Share 的熱區，給這個熱區添加 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 交互。

Scroll Y because this will be a vertical Scroll

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.

屏幕切換過程中的偏移是標準的 iOS 轉換行為，但對創建屏幕流程沒有影響，只是一些細節性的??東西。

板栗：那偏移到底是啥呢，先完成下面的操作，最后再對比一下就知道了。

Hover over Screen Share, click on Touch, and then click the X Offset output.

給 Screen Share 圖層組添加一個 X Offset 交互。

We can interact with both inputs and outputs. 打開和關閉時都有偏移效果。

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.

現在，從 Screen Boomerangs 頁面打開 Screen Share 頁時，除了 Screen Share 頁面是從右往左打開，下面的 Screen Boomerangs 頁面也會有一個從右往左退出的動畫，但是運動幅度要比上面的頁面小。

板栗：可以斷開兩個 X Offset 的連接打開-關閉，再連接上兩個 X Offset 打開-關閉，對比一下就知道區別了。

相關教程

5. 滾動 Scrolling Views
滾動頁面。

9. 多個狀態切換 Multiple States
在兩個以上的狀態之間切換，如 Tab 欄。

相關案例

18. Instagram Boomerang
屏幕和滾動之間的轉換。

相關模塊

Interaction Scroll

相關圖層

Hit Area Screen

NEXT UP
Timed Animations 延時動畫