'페이드-인'에 해당되는 글 2건

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(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)

프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.

웹 혹은 앱에서 많이 사용되는 이미지 슬라이더 (캐러셀 : Carousel) 방식 중에 페이드-인(fade-in)이 있는데, 이는 이미지가 다음 이미지로 자연스럽게 섞이면서 넘어가는 것입니다.

'Proto.io'에서는 'State Transition(상태 전환)'을 사용해서 이를 구현할 수 있습니다.

먼저 새로운 프로젝트를 생성하고, 기본 스크린의 제목을 ‘HOME’으로 수정합니다.

상단 메뉴바의 ‘Assets’을 클릭하고 ‘Proto.io’에서 제공하는 스톡 이미지 중에서 중간 크기의 이미지 3개를 캔버스로 가져옵니다. 여러 개를 동시에 선택할 수 없기 때문에 하나씩 가져와야 합니다.

가져온 이미지들을 캔버스 크기에 맞게 크기를 조정하고, 위치 또한 동일하게 맞춥니다.

이미지들을 모두 선택한 후 마우스 오른 클릭으로 나타나는 메뉴 중에서 ‘Convert to container’를 선택하여 컨테이너로 만듭니다.

컨테이너의 이름은 ‘photo auto fade’로 설정합니다.

만들어진 컨테이너를 더블 클릭하여 컨테이너 편집 창으로 들어간 후 “+ NEW CONTAINER STATE”를 클릭하여 컨테이너의 상태(State)를 3개 만듭니다(State 1, State 2, State 3)

각 상태의 이름을 알아보기 쉽게 ‘photo 1’, ‘photo 2’, ‘photo 3’로 수정합니다.

현재 모든 상태(state)에는 3개의 이미지가 함께 들어있기 때문에 각각의 상태에서 이미지를 겹치지 않게 하나씩만 남기고 나머지는 삭제합니다.

상태에서 삭제해도 실제로 삭제가 되는 것이 아니고 일종의 비활성화 상태가 되는 것이기 때문에 다시 아이템을 복구할 수도 있습니다(Add from...).

상태 사이에 전환 효과를 넣기 위해 STATE TRANSITIONS 탭에서 “+ NEW STATE TRANSITION”을 클릭합니다.

첫 번째 트랜지션은 ‘photo 1’에서 ‘photo 2’로 이동할 때 적용됩니다.

적용된 트랜지션의 속성을 수정합니다.

- Delay : 0.00

- Duration : 1(sec)

- Easing : Linear

마찬가지 방법으로 ‘photo 2’에서 ‘photo 3’ 그리고 ‘photo 3’에서 ‘photo 1’로 이동할 때의 트랜지션을 추가하고 속성을 수정합니다.

여기까지의 작업으로 기본 레이아웃과 상태 트랜지션까지 적용되었습니다.