下載教程文件**
·····密碼: ahgt**
選擇對應名稱的文件夾下載，內包含一個（開始）和一個（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結果。
Add logic to your transitions and flows.給過渡和流程添加邏輯。
Often when prototyping, we want interactions to only occur sometimes — when something is true or false, or to let multiple things control an interaction, such as two different buttons having the same effect.
有時候我們希望原型上的交互只在特定的的情況下發生 - 當布爾值為真或假時，或者讓多個事物控制一個交互，比如兩個不同的按鈕具有相同的效果。
This is called adding logic, and we're going to learn how do this in Origami by building an Instagram Direct Messages prototype.
這種行為稱為添加邏輯，我們將通過構建一個《Instagram 直接發送消息》原型來學習如何在Origami 中添加邏輯。
Know some code? 需要懂代碼嗎？
If you're coming from a code-based background, such as JavaScript or Framer (CoffeeScript), Origami might be a bit different than you are used to. We recommend that you visit Coming From Code before continuing.
如果會程序語言，如JavaScript、Framer （CoffeeScript） ，Origami 可能跟它們有些不一樣。建議先閱讀《Coming From Code 來自代碼》。
Setting up 配置
You should notice when you open the file that some core interactions have already been created.
你應該注意打開文件時，已經創建了一些核心交互。
The basis of this prototype is centered around the direct messaging functionality found in Instagram. We have our Send To layer, which opens the Direct Messages Modal Group, and the Cancel layer which in turn closes it.
這個原型的基礎是以Instagram的直接發送消息功能為中心。
我們有 Send To 按鈕用來打開了 Modal 圖層組 ，Cancel 圖層用于關閉 Modal 。
On closer inspection, our prototype contains the Direct Messages Hit Area. Interacting with this layer causes the [Switch] to Turn On, and tapping on the Cancel layer causes the Switch to Turn Off.
原型包含 Direct Messages Hit Area，這個圖層用來交互并連接到 Switch 模塊的 Tun On 接口，點擊 Cancel 圖層激活 Switch 模塊的 Turn Off 接口。
Or 或
Ideally a Tap on Color Fill would also close Modal. Hover over Color Fill in the Layers panel and click Tap under the Touch menu.
理想情況下，點擊 Color Fill （等于空白區域）也將關閉 Set to 圖層。將鼠標懸停在 “Color Fill” 圖層上，然后單擊 “Touch” 菜單下的“Tap”。
A new Interaction patch should appear on the Patch Editor.
模塊編輯器中出現了一個新的 Interaction 模塊。
In the Viewer, try opening Modal and then tapping on Color Fill. Looking at our new Interaction patch we can see see that our tapping is detected.
在查看器中點 Color Fill 圖層，可以看到新加的 Interaction 模塊已經被監聽了。
We ultimately would like tapping on Cancel or Color Fill to Turn Off the Switch. We need an Or patch to allow both of these options.
最終想要點擊 Cancer 或 Color Fill 關閉開關。
我們需要一個 Or 模塊來允許這兩個選項。
Double-click on the Patch Editor Cmd Return and add an Or patch. Connect the Tap output from the Cancel Interaction patch to an input of Or. Also connect the Tap output of Color Fill to the remaining Or input.
添加模塊 Or Shift O。將 Cancel 圖層的 Interaction 模塊 Tap 輸出口連接到 Or 模塊上，Color Fill 圖層的 Interaction 模塊也一樣連接到 Or 模塊。
You should see now that when we tap on Cancel or anywhere in the Color Fill the output of Or will trigger.
現在應該能看到，當我們點擊 Cancel 或 Color Fill 中的任意一個時，Or 的輸出將被觸發。
Replacing with Or 替換和或
We currently have only the Cancel Interaction Tap output connected to Turn Off the Switch. Replace that connection by connecting the output of Or to the Turn Off input of Switch.
我們目前只有 Cancel 圖層的 Interaction 模塊 Tap 輸出口連接到Turn Off - Switch。
將 Or 模塊的輸出連接到 Switch 的 Turn Off 輸入來替換該連接。
Now when we Tap on Color Fill or Cancel, the Turn Off of Switch is triggered.
現在當我們點擊Color Fill 或 Cancel 時，關閉開關。
Preparing for more logic 準備更多邏輯
A Color Fill layer takes up the full height and width of the Viewer by default. That means tapping anywhere on Send To (not just Cancel) triggers Switch to Turn Off and therefore Modal to close.
默認情況下，Color Fill 層的尺寸繼承查看器的完整高度和寬度。
這意味著點擊 Sent To 上的 任意位置（不只是Cancel）都能觸發 Switch 模塊關閉 Modal 圖層。
To prevent this, we need to first know when Send To is being tapped. Add an Interaction patch for the Send To layer by selecting the layer and clicking Tap from the the Touch menu.
為了避免這種情況，我們需要先知道 Sent to 迪點擊的時間。選中 Sent To 圖層，點擊 Touch 菜單中的 Tap 給 Sent To 圖層添加一個 Interaction。
The new Interaction patch on the Patch Editor will now detect any Tap on Send To.
模塊編輯器上的新 Interaction 模塊將會檢測到在 Sent To 上的所有點擊。
Not 非
We want our Switch to Turn Off if Color Fill or Cancel are tapped, but not when Send To is tapped. Origami has an appropriately named Not patch for this purpose. Double-click on the Patch Editor ?? and add in a Not patch ?.
如果點按了 Color Fil 或 Cancel ，希望 Switch 關閉，但是 非 Sent To 圖層被點擊時。
Connect the Tap output of our Send To Interaction patch to the input of our Not patch. Observe the Not patch as the Send To layer is tapped in the Viewer. Pulses will appear briefly on the Not patch, respective to when the layer is tapped and not tapped.
連接 Sent To 圖層的 Interaction 模塊 Tap 輸出口到 Not 模塊的輸入口。在查看器中點擊 Sent To 圖層，注意觀察 Not 模塊。脈沖將短暫出現在 Not 模塊上，分別是當圖層被點擊和 非 被點擊時。
And 和
The Switch should Turn Off when Cancel is tapped or Color Fill is tapped, and not when Send To is tapped. Origami has an And patch for this purpose. Double-click on the Patch Editor ?? and add an And patch ?.
當 Cancel 或 Color Fill 被點擊時，開關應該關閉，和 非 當 Sent To 被點擊時。Origami 有一個 And 模塊用于種目的。
添加一個 And 模塊 Shift A。
Connect the output of the Or patch directly to an input of the And patch. Then connect the output of the And patch to the Turn Off input of the Switch patch.
將 Or 模塊的輸出口連接到 And 模塊的輸入口。然后將 And 模塊的輸出口連接到 Switch 模塊的 Turn Off。
These connections and orderings allow the following logic to be checked:
這些連接和排序允許檢查以下流程邏輯：
Have the Cancel layer or Color Fill layer been tapped?
Cancel 圖層 或 Color Fill 是否被點擊？And has something else happened?
和 有其他的事件發送么？
You can now connect the Not output to the second And input to finish the last piece of logic.
您現在可以將 Not 模塊的輸出口連接到 And 模塊的第二個輸入口，以完成最后一個邏輯。
Our final logic to be checked is now:
現在要檢查的最后的邏輯是：
Have the Cancel layer or Color Fill layer been tapped?
Cancel 圖層 或 Color Fill 是否被點擊？And has there not been tapping on Send To?
和 非點擊到 Sent To 圖層？
When you Tap Color Fill and Send To, Modal will not close. If you Tap Cancel or Color Fill elsewhere however, Modal will close.
點擊 Color Fill 上的 Send To 區域時，Modal 不會關閉。點擊Cancel 或 Color Fill 的其他區域時, Modal 會關閉。
相關教程
7. Screen Transitions 屏幕切換
Create screen flows.
8. Timed Animations 延時動畫
Create time-based, automatic animations.
相關案例
5. Facebook New Stories
當新聞滾動一定距離時觸發提示出現。
16. Fahrenheit to Celsius
通過溫度轉換了解 Origami 中的邏輯和模塊。
19. Instagram Direct Messages
向朋友發送Instagram直接消息，一次又一次地。
相關模塊
Pop Animation Switch Transition Interaction Or Not And
NEXT UP
5. Scrolling Views 滾動
Add horizontal scroll behavior to your designs.
