루프 인터랙션

Interactive Loops

루프 인스턴스에 인터랙션을 추가하고 캡처합니다.

오리가미의 루프된 항목은 다른 레이어와 마찬가지로 인터랙션을 적용할 수 있습니다. Facebook Notifications 프로토타입에서는 각 루프된 항목에 컬러 속성 Switch를 적용했습니다. 또한 페이지 전환 트리거를 사용하기 위해 이 루프에서 특별한 인스턴스를 선택했습니다.

루프 소개튜토리얼을 통해 왔다면, 알아야 할 패치가 하나 뿐입니다.

글로벌 인터랙션

이번 튜토리얼 파일에는루프 소개튜토리얼 파일에 몇 가지 스탠다드한 인터랙션을 추가하여 놨습니다. 여기에는 Switch를 켜는 탭이 알림 인스턴스에 포함되어 있습니다. 이 스위치는 배경 레이어의 Color 속성을 파란색에서 흰색 채우기로 전환합니다. 또한 Timestamp Text 색상을 하늘색에서 회색으로 변경합니다.

튜토리얼 시작 화면

항목별 인터랙션

루프된 항목 하나 하나씩 필요하기 때문에 유용합니다만, 이러한 알림 인스턴스 중 하나만 변경하려는 경우에는 어떻게 해야할까요? 개별적으로 애니메이션을 적용할 각 알림 인스턴스를 위한 특정 화면이라면 어떻게 해야할까요?

이러한 이유로 두 번째 화면인 Screen 2를 포함시켰습니다. 두 번째 알림 인스턴스를 탭할 때만 Screen 2로 전환하는겁니다.

이 시점에서 몇 가지 알림을 누를 수 있습니다. 뷰어 툴바에서 Restart Prototype 버튼을 사용하여 처음부터 제대로 시작하도록 합니다.

Loop Select 패치

특정 알림 인스턴스 하나만 선택하려면 Loop Select 패치를 사용해야 합니다. 패치 편집기에서 Loop Select 패치를 추가합니다.

탭을 받는 알림의 번째 인스턴스를 지켜봐 주세요. 알림의 Interaction 패치의 Tap 아웃풋을 Loop Select 패치의 번째 인풋에 연결합니다.

루프와 인덱스는 항상 0부터 시작하므로 두 번째 항목은 1입니다. Index Loop 인풋에는 1을 입력합니다.

Index Loop 입력에 ‘1’ 입력하여 번째 Notification 선택합니다.

이제 Loop Select의 아웃풋을 스크린 Switch를 켜기 위해 연결합니다.

Flip 아닌 Switch Turn On 인풋에 연결해야 합니다.

이제 오직 두 번째 알림에서만 터치할 때 Screen 2로 이동하는 것을 볼 수 있습니다.

알림의 두 번째 인스턴스는 인덱스 1입니다. 1 Loop Select 패치에서 선택된 값이므로 Switch를 켜고 Screen 2로 전환되는 애니메이션을 트리거합니다.