다중 상태

Multiple States

두 개 이상의 상태와 상호 작용하기

Switch 패치를 사용하여 두 상태를 전환하는 방법은 배웠지만, 예를 들어 탭 바와 같이 두 개 이상의 상태 사이에서 전환하려면 어떻게 해야할까요?

이번 시간에는 세 개 이상의 상태와 상호 작용하는 방법을 배우고, 이를 통해서 두 가지 핵심 패치 유형을 배워보도록 하겠습니다.

설정하기

시작 튜토리얼 파일에는 기본 설정이 이미 되어 있습니다. 레이어 패널에는 3개의 옵션 (Library, Photo, Video)이 포함 된 Screens라는 그룹이 있습니다. 레이어 패널에는 각 화면에 해당하는 탭이 있는 Tab Bar 그룹이 있습니다.

multiple_states01

보통 Switch 패치를 사용하여 상태를 전환하는데 Switch 패치는 두 가지 상태만 지원합니다. , 앞뒤로 두 개의 탭만 전환 할 수 있습니다.

이 프로토타입에서는 3개의 탭을 전환할 수 있어야하므로 약간 다른 접근 방식을 취할 필요가 있습니다.

옵션 간 전환하기

패치 편집기를 두 번 클릭하고 Option Switch를 찾은 다음 Return ()를 눌러 Option Switch 패치를 삽입합니다. Option Switch 패치는 필요한만큼의 인풋을 지원하며 인터랙션을 통해 이러한 옵션 간의 전환을 할 수 있습니다.

Tab Bar 그룹에서 전환 필요한 가지 옵션은 Library, Photo, Video입니다. 우리는 이들 각각에 대한 상호 작용을 감지해야합니다.

레이어 패널에서 Library 그룹 위로 마우스를 이동하고 Touch를 클릭한 다음 Tap을 선택합니다. 새로 생성된 Interaction 패치의 Tap 아웃풋을 Option Switch 패치의 첫 번째 인풋에 연결합니다. Photo 및 Video 그룹 레이어도 이와 같은 과정을 반복합니다.

multiple_states02

각각의 Interaction 패치의 Tap 아웃풋을 차례대로 Option Switch 인풋에 연결합니다.

프로토타입에 있는 개의 Tap 표시줄 항목 하나를 누르면 각각의 Interaction 패치에 의해 감지되고, 이것이 Option Switch 전달됩니다. 전달받은 Option Switch 패치의 해당 옵션은 그대로 아웃풋이 됩니다.

0(Zero) 기반 번호 매기기

Option Switch 패치는 0부터 있습니다. 번째 옵션은 0이고, 번째 옵션은 1, 번째 옵션은 2입니다.

옵션 선택하기

이제 옵션 사이를 전환하여 Option Switch의 아웃풋으로 전달할 수 있게 되었는데요, 그 다음은 어떻게 해야할까요? 패치 편집기를 두 번 클릭하고 Option Picker를 입력한 다음 Return ()를 눌러 Option Picker 패치를 패치 편집기에 추가합니다.

multiple_states03

스위치를 옵션에 연결

이제 Option Switch 패치 아웃풋을 Option Picker Option 인풋에 연결합니다.

multiple_states04

Option Picker Option 인풋에 연결합니다.

Option Picker를 마우스 오른쪽 클릭해서 Option Switch 패치의 갯수와 일치하게 인풋 수를 변경합니다. 3개의 탭으로 상호 작용하기 때문에 3개의 인풋을 가지게 됩니다.

적용 상태

번째 화면의 X 위치는 0입니다. Option Picker 패치의 번째 옵션의 값으로 0 입력합니다. 번째 화면의 X 값은 -375이고 번째 화면의 X 값은 -750입니다. 값을 Option Picker 패치에 입력합니다.

multiple_states05

Option Picker 패치에 정확한 X 위치 값을 입력해야 합니다.

프로토타입에 있는 세 개의 탭 바 레이블 중 하나를 누릅니다. 상호 작용이 감지되고 Option Switch 패치로 전달한 다음 Option Picker 패치 아웃풋이 달라집니다.

Option Picker는 우리가 마지막으로 전환한 옵션을 받고 인풋에서 해당 인풋을 찾습니다. 그리고 해당 입풋 값이 아웃풋됩니다.

예를 들어, 사진 탭이 현재 선택되어 있다면 우리는 번째 인풋에 있습니다. Set to 1 또는 Option 1 해당합니다. Option Picker 인덱스 1 ( 번째, 인덱스 0 이후) 찾고 해당 값을 아웃풋합니다. 경우 -375 되는겁니다.

multiple_states06

가지 아웃풋은 Screens “Position X” 상태로 사용하게 되는겁니다.

Option Picker 아웃풋을 Screens Position X 속성에 연결합니다.

multiple_states07

뷰어의 세 탭 중 하나를 탭하면 그에 따라 Screens X 위치가 전환됩니다.

애니메이션과 함께 사용하기

이러한 전환은 현재 순간적입니다. 이러한 전환 사이에서 애니메이션을 적용하려면 Pop Animation 패치를 사용할 수 있습니다. 패치 편집기를 두 번 클릭하고 Pop Animation을 입력한 다음 Return ()를 누릅니다.

multiple_states08

Option Picker 패치와 레이어 속성 패치 사이에 Pop Animation 패치를 삽입합니다. 그런 다음 Option Picker 아웃풋을 Pop Animation Number 인풋에 연결하고 Pop Animation Progress 아웃풋을 Screens Position X 레이어 속성 패치에 연결합니다.

Bounciness Speed ​​값을 원하는대로 편집하고 뷰어에서 작업한 결과를 확인합니다.

multiple_states09

경우 Bounciness 값으로 0, Speed ​​값으로 20 사용하고 있습니다.

Option Picker 확장하기

Option Picker는 색상, 위치, 부울 및 이미지 등 다양한 유형의 데이터를 지원합니다. 이렇게하면 위치 지정을 위해 넘버링을 하지 않고 다중 상태로 프로토타입을 생성할 때 유연함을 발휘할 수 있습니다.

원문: http://origami.design/tutorials/smarter-interactions/Multiple-States.html


연관된 Learn 콘텐츠

스크린 트랜지션 Screen Transition

화면 흐름 만들기

adding_logic

로직 추가 Adding Logic

트랜지션과 플로우에 로직 추가