12. 循環(huán)的交互 Interactive Loops - Origami Studio教程


下載教程文件** ·····密碼: ahgt**

選擇對應名稱的文件夾下載,內(nèi)包含一個(開始)和一個(已完成)文件;(開始)文件用來和教程同步操作,(已完成)是最終結(jié)果。


Add and capture interaction to instances of your loops. 給循環(huán)實例添加交互。

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.

循環(huán)實例可以和其他圖層相互交互。在這個 Facebook 通知原型中已經(jīng)為每個循環(huán)實例添加了顏色切換交互。同時還在這個循環(huán)中選中一個特別的實例做頁面切換的交互。

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.

如果已經(jīng)閱讀了 《介紹循環(huán) 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》最終完成時的模塊。還有包括點擊通知實例,打開開關(guān) 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?

上面的方法適合要每一個循環(huán)實例添加相同交互的情況。但只需要其中一個添加交互怎么辦?例如,每條通知都打開不同的頁面這樣的情況。

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.

因此,文件中已經(jīng)創(chuàng)建了第二個屏幕 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 用來選中其中一個循環(huán)實例的模塊

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.

想要監(jiān)聽通知的第二個實例的 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.

因為循環(huán)都是從 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.

現(xiàn)在點擊第二條通知會打開 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 模塊并觸發(fā)切換到 Screen 2 的動畫。


相關(guān)案例

18. Instagram Boomerang
屏幕和滾動之間的轉(zhuǎn)換。

相關(guān)模塊

Loop Select



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容