Origami Studio 教程十二 给循环添加交互

开始前先下载好安装文件和教程文件。 [网盘链接](https://pan.baidu.com/share/link?shareid=3976095970&uk=2231585885# list/path=/) 里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

用 Loop 模块创建的循环实例可以像其他图层一样相互交互。在这个 Facebook 通知原型中已经为每个循环实例添加了【点击通知更换背景颜色】的交互。在这个循环中还选了其中一个实例单独做页面切换的交互。

如果已经阅读了 《Origami Studio 教程十一 介绍母版-循环》，那本节只需要学习一个新的模块。

▲▲

1. 通用交互

打开教程文件，里面有上一篇 《Origami Studio 教程十一 介绍母版-循环》最终完成时的模块。还有包括【点击通知更换背景颜色】的相关模块。

▲ 打开时的交互模块

点击 Notificatio 图层的 Interaction 模块， Tap 输出口输出信息，将 Switch 模块 Turn On，Background 图层的 Color 从 Start - 蓝 Transition 为 End - 白；还将 Timestamp Text 图层的 Color 从 Start - 蓝 Transition为End - 灰。

用口语表达下就是：点击通知 ，打开开关，把背景图层颜色属性从浅蓝色转换为白色；还将时间戳文本颜色从浅蓝色转换为灰色。

▲▲

2. 给其中一列单独添加交互

上面的方法适合要每一个循环实例添加相同交互的情况。但只需要其中一个添加交互怎么办？例如，每条通知都打开不同的页面这样的情况。

因此，文件中已经创建了第二个屏幕 Screen 2 。只有点击第二个通知实例时，才想切换到 Screen 2。

重启查看器中的原型。

用来选中循环中的一列的模块

Loop Select模块。添加一个 Loop Select 模块到编辑器。将 Notification 图层的交互 Interaction 模块 Tap 输出口连接到 Loop Select 模块的第一个输入口 Input 。

▲ 注意是 Notification 图层的交互 Interaction 模块哦！不要连接到 Back 图层的 Interaction 模块了。

因为循环的排序值是从 0 开始，第二个才是 1，所以 Index Loop 输入口的值输入 1 。

▲ 在 Index Loop 输入口输入 1 ，选择第二个通知。

将 Loop Select 模块的输出口连接到下面的 Switch 模块 Turn On 输入口（和 Back 图层的 Interaction 模块相连接的那个）。

▲ 确定是连接到 Turn On 输入口而不是 Flip 的。

现在点击第二条通知会打开 Screen 2。只有第二条可以哦。

通知的第二个实例是索引 1 。由于 1 是在Loop Select 模块中选择的值，所以将Turn On Switch 模块并触发切换到 Screen 2 的动画。

完成。

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！