---

下载教程文件** ·····密码: 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.

你应该注意打开文件时，已经创建了一些核心交互。

Your starting tutorial file should look similar to this. 起始教程文件应与此类似。

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 模块已经被监听了。

Keep an eye on the Down and Tap outputs of the Interaction patch whilst interacting with Color Fill. 盯着 Interaction 模块的 Down 和 Tap 输出口点击 Color Fill 图层。

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 的输出将被触发。

Again, keep an eye on the inputs and outputs of these patches whilst tapping within the Viewer. 点击时盯着看模块的输出输入。

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 模块上，分别是当图层被点击和 非 被点击时。

A Tap in Origami lasts for one frame, so try tapping a few times to see changes.

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。

Making a new connection where one already exists, such as the And output to Switch Turn Off input here, will replace any existing connections. 建立一个已经存在的新连接将替换旧的连接。

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 模块的第二个输入口，以完成最后一个逻辑。

The final state of our three logic patches. 三个逻辑补丁最后的状态。

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.

---