배울 내용
토글 버튼의 인터랙션을 2단계로 만들어 보겠습니다.
첫 번째 단계는 오른쪽으로 이동하게 만드는 것입니다.
그리고 두 번째 단계에서는 왼쪽으로 이동하게 만듭니다.
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
1단계: 토글을 오른쪽으로 이동하게 만들기
먼저, 토글 버튼이 오른쪽으로 이동하도록 만들어 봅시다. Tap-Move 인터랙션을 추가하고, Tap을 트리거로, Move를 반응으로 설정하세요. 둘 다 toggle-btn 레이어에 할당합니다.
toggle-btn의 초기 x 좌표는 120입니다. Move 반응에서는 toggle-btn이 이동할 x 좌표로 200을 입력하세요. toggle-btn을 탭하면 x 좌표 200으로 이동합니다.
하지만 다시 탭해도 토글이 되돌아가지 않습니다. 그러니 토글 버튼이 왼쪽으로 이동하도록 현재 인터랙션을 확장해 봅시다.
2단계: 토글을 왼쪽으로 이동하게 만들기
토글 버튼을 왼쪽, 즉 초기 위치로 이동하게 하려면 조건을 사용해야 합니다. 조건은 특정 요구 사항이 충족되었는지 확인하는 것입니다. 충족되면 조건 아래의 반응이 활성화됩니다. 실제로 어떻게 작동하는지 살펴봅시다.
toggle-btn의 초기 x 좌표는 120이므로, 이를 충족해야 하는 조건에 추가합니다.
조건을 toggle-btn에 할당합니다. 속성은 X로 선택하고, 조건 값은 120으로 설정하세요. 즉, toggle-btn의 x 좌표가 120이면 toggle-btn이 x 좌표 200으로 이동하게 하는 것입니다. 쉽게 말해, 토글 버튼이 왼쪽에 있으면 오른쪽으로 이동시키는 것입니다.
이번에는 반대로 같은 작업을 해 봅시다. 첫 번째 조건을 만든 방식 그대로 두 번째 조건을 만드세요. 다만 이번에는 충족해야 하는 값이 200입니다.
이 조건 아래에 Move 반응을 추가합니다. 이 Move도 toggle-btn에 할당하고, 이동할 x 좌표로 120을 입력하세요.
미리보기 창에서 만들어 본 것을 확인해 보세요. 토글을 탭하면 오른쪽으로 이동하는 것을 볼 수 있습니다. 다시 탭하면 왼쪽으로 이동하고, 이런 식으로 반복됩니다.
축하합니다!
조건을 사용해 토글 버튼을 만드는 방법을 배웠습니다.
