상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(Trigger)가 없기 때문에 현재로서는 그 어떤 동작도 일어나지 않습니다.
스크린이 출력되면 상태 트랜지션이 동작하도록 인터랙션을 스크린에 추가합니다. 좌측 패인(Left Pane)에서 스크린 트랜지션 아이콘을 클릭합니다.
아래와 같이 트랜지션을 적용합니다.
- Title : auto fade start
- Trigger : Screen show
- Action : Change Container State
- Screen : HOME
- Container : photo auto fade
- State : photo 2
- Delay : 3000
이 인터랙션을 통해 스크린이 출력되고 3초 후 ‘photo 2’ 상태로 이동합니다. 프로젝트를 저장하고 미리보기로 동작을 확인합니다.
스크린 인터랙션을 통해 이미지가 페이드인 되는 것은 시작이 되었지만 다른 상태 트랜지션으로는 바뀌지 않는 것을 볼 수 있습니다. 그 이유 역시 해당하는 인터랙션이 없기 때문입니다.
이를 구현하기 위해 이번에는 각 상태 트랜지션의 마지막 프레임에 인터랙션을 추가하겠습니다. 먼저 ‘photo 1 → photo 2’ 트랜지션을 선택하고 타임라인의 마지막 프레임에 있는 인터랙션 추가 아이콘을 클릭합니다.
프레임 인터랙션을 아래와 같이 설정합니다.
- Title : next state 1
- Trigger : State transition end
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : photo 3
- Delay : 3000(ms)
인터랙션을 저장할 때 아래와 같이 트랜지션 자동 생성 여부를 묻는 창이 나오기도 하는데 이미 생성되어 있는 상태이므로 ‘Don’t ask me again’을 체크한 후 ‘CANCEL’을 클릭합니다.
같은 방법으로 각 트랜지션의 마지막 프레임에 인터랙션을 아래와 같이 추가합니다.
‘photo 2 → photo 3’ 트랜지션 프레임 인터랙션
- Title : next state 2
- Trigger : State transition end
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : photo 1
- Delay : 3000(ms)
‘photo 3 → photo 1’ 트랜지션 프레임 인터랙션
- Title : next state 3
- Trigger : State transition end
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : photo 2
- Delay : 3000(ms)
프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.
'프로토타이핑 > Proto.io' 카테고리의 다른 글
프로토타이핑 툴 Proto.io - 텍스트 필드에 키패드로 시간 입력 - 2 (0) | 2016.11.28 |
---|---|
프로토타이핑 툴 Proto.io - 텍스트 필드에 키패드로 시간 입력 - 1 (0) | 2016.11.28 |
프로토타이핑 툴 proto.io 페이드-인 이미지 슬라이더 - 1 (0) | 2016.10.19 |
프로토타이핑 툴 proto.io 다운로드 진행 막대(progress bar) 제작 - 3 (0) | 2016.10.18 |
프로토타이핑 툴 proto.io 다운로드 진행 막대(progress bar) 제작 - 2 (0) | 2016.10.18 |