经过几个小教程，相信大家对Origami 已经有了不少的认知，一些基本的动效实现都懂了。那对于动效工具而言，Origami 的优势除了免费之外，其对于动效的实现是基于逻辑关系搭建的，这才是本人喜欢Origami 最大的原因。

请打开教程文件同步进行学习。

文件理解

打开教程文件，你会看到里面已经搭建好了基础的一些交互，从预览中可以尝试，我们最终要实现的交互如上图：点击发送图标，发送弹窗出现，点击黑色遮盖区域 or 点击 Cancel 按钮则关闭窗口。

图层中有个 Hit Area 热点区域，发送图标的点击范围，也是常用图层。

另，大家应留意到Switch 并非直接连线Flip ，而是分开以不同的条件控制了开 & 关。

注意，此教程动效的实现流程并非关键，其中运用的几个逻辑关系 patch 才是重点。

第一个逻辑Patch : Or

一般来说，当出现弹窗，点击背景黑色遮罩部分也是会关闭弹窗的。第一步，先为Color Fill图层来个点击事件

在预览中操作，可以看到遮罩区域的点击是被检测到的 (建议大家在做个人练习的时候多在预览检测信号)

我们的目的是：黑色遮罩区域 or Cancel 按钮点击时，关闭弹窗。

双击 或者 ⌘ + ⏎ 调出Patch 面板，搜索 or ，添加完成后并进行连线，最后的连线组合如下：

现在当我们点击遮罩区域或 Cancel 按钮，都将触发关闭命令。

在预览中检测效果，有一个大坑。因为Color Fill 的图层是覆盖全屏的，所以当我们点击弹窗的内容区域时，也关闭了弹窗。对此，我们需要添加更多的条件避免它。

第二个逻辑Patch：Not

调出Patch 面板，搜索Not，添加，并连线，如下图

上图的意思为：当Sent To 图层并没有点击时

还没有完整，为了让整个逻辑串联起来，还需要第三个逻辑patch

第三个逻辑Patch：And

调出Patch 面板，搜索And，添加，并连线，如下图

目前的逻辑：

1.    Cancel 按钮 or 黑色遮罩是否有点击？
2.   And 图层Sent To 区域有没有点击？

在预览检测一下，可以发现仅针对本教程要实现的效果，已经达到了。

OK，教程到此为止，动效本身不重要，关键是几个逻辑Patch 的认识和运用。

学习总结：

• 初步认识 Hit Area；
• 明白Switch 不同场景下的连线模式；
• 初步认知交互逻辑Patch，了解并学习Or、And、Not的运用及其作用；