Origami 教程 04- 初识逻辑
经过几个小教程，相信大家对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，添加，并连线，如下图
目前的逻辑：
- Cancel 按钮 or 黑色遮罩是否有点击？
- And 图层Sent To 区域有没有点击？
在预览检测一下，可以发现仅针对本教程要实现的效果，已经达到了。
OK，教程到此为止，动效本身不重要，关键是几个逻辑Patch 的认识和运用。
学习总结：
- 初步认识 Hit Area；
- 明白Switch 不同场景下的连线模式；
- 初步认知交互逻辑Patch，了解并学习Or、And、Not的运用及其作用；
关键字：origami, 设计, patch
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
