---

下载教程文件** ·····密码: ahgt**

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

---

Add and capture interaction to instances of your loops. 给循环实例添加交互。

Looped items in Origami are able to have interaction applied to them like any other layer in Origami would. In this Facebook Notifications prototype, we have applied a Color property Switch to each looped item. We have also selected one special instance in this loop to have a page transition trigger.

循环实例可以和其他图层相互交互。在这个 Facebook 通知原型中已经为每个循环实例添加了颜色切换交互。同时还在这个循环中选中一个特别的实例做页面切换的交互。

If you have been through Introduction to Loops there is only one more patch you need to know. Download the starting tutorial files to follow along as we rebuild this prototype.

如果已经阅读了 《介绍循环 Introduction to Loops》，那学习一个新的模块就行了。下载教程文件。

Global Interaction 通用交互

You might notice from our tutorial files that we are picking up from Introduction to Loops, with the addition of a few standard interactions. These include a Tap on a Notification instance which turns on a Switch. This Switch flips the Background layer Color property from a blue to a white fill. It also changes the Timestamp Text Color from light blue to grey.

打开教程文件，里面有上一篇 《Introduction to Loops》最终完成时的模块。还有包括点击通知实例，打开开关 Switch 模块。这个 Switch 模块把背景图层颜色属性从蓝色切换为白色。还将时间戳文本颜色从浅蓝色改为灰色。

The starting tutorial files. 打开教程文件。

Item-specific interaction 特定实例的交互

This is useful because we need it for every single one of our looped items, but what if we only wanted one of these Notification instances to change? For example, what if we had a specific screen for each of these Notification instances to animate to, individually?

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

For this reason we have included a second screen; Screen 2. We want to transition to Screen 2 only when we Tap on the second instance of Notification.

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

You may have tapped on a few notifications in the Viewer at this point. Use the Restart Prototype button on Viewer toolbar to begin properly.

重启原型。

Loop Select patch 用来选中其中一个循环实例的模块

To only select one specific instance of Notification, we need to use a Loop Select patch. Add a Loop Select patch to the Patch Editor ⌘⏎.

只选择一个特定的通知实例，需要使用 Loop Select 模块。添加一个 Loop Select 模块到编辑器。

We want to listen for the second instance of Notification receiving a Tap. Connect the Tap output from the Notification Interaction patch to the first input of the Loop Select patch.

想要监听通知的第二个实例的 Tap ，
需要将 Notification 图层的交互 Interaction 模块的 Tap 输出口连接到 Loop Select 模块的第一个输入口 Input 。

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

Since loops and indexes always start from 0, the second item is 1. In the Index Loop input, type 1.

因为循环都是从 0 还是，第二个才是 1，所以 Index Loop 输入口是 1 。

Type `1` in the Index Loop input to select the second instance of Notification. 在 Index Loop 输入口输入 1 ，选择第二个通知。

We can now connect the output of the Loop Select to Turn On the Screen Switch.

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

Make sure you connect to the Turn On input of the Switch, not Flip. 确定是连接到 Turn On 输入口而不是 Flip 的。

You might notice that if we Tap the second notification, and only on the second notification, it will take us to Screen 2.

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

The second instance of Notification is index 1. Since 1 is the value being selected in the Loop Select patch, this will Turn On the Switch and trigger the animation that transitions to Screen 2.

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

---

相关案例

18. Instagram Boomerang
屏幕和滚动之间的转换。

相关模块

Loop Select

---

完

---