'Transition'에 해당되는 글 1건

웹 혹은 앱에서 많이 사용되는 이미지 슬라이더 (캐러셀 : 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’로 이동할 때의 트랜지션을 추가하고 속성을 수정합니다.

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