'프로그레스 바'에 해당되는 글 2건

진행 막대의 상태 트랜지션까지 적용되었다면 기본 애니메이션 부분은 끝마친 것이라 볼 수 있으며, 이제는 인터랙션을 적용하여 실제 동작을 구현해야 합니다.

<다운로드 버튼 제작 - 1>

애니메이션(트랜지션)이 동작(액션)하기 위해서는 이를 명령해야 하는 이벤트(트리거)가 있어야 합니다.

스크린 ‘HOME“으로 돌아와서 캔버스에 라이브러리의 ‘Button with background’ 컨테이너를 가져옵니다. 라벨도 ‘Download’로 수정하고, 이름도 ‘download button’으로 수정합니다. 그리고 마우스 오른 클릭 후 ‘Convert to container’를 선택하여 새로운 컨테이너로 만듭니다.

이렇게 만들어진 ‘“download button” Container’에 인터랙션을 추가하고 저장합니다.

- Title : Progress animation start

- Trigger : Tap

- Action : Change Container State

- Screen : HOME

- Container : “progress bar” Container

- State : Progress end

프로젝트를 저장하고 미리보기에서 동작을 확인합니다.

<다운로드 버튼 제작 – 2>

현재 다운로드 버튼은 컨테이너로 되어 있습니다. 컨테이너 내부로 들어가서 인터랙션 및 다운로드가 끝난 상태도 추가해야 합니다.

먼저 ‘State 1’ 상태 이름을 ‘Download’로 수정하고, 새로운 상태를 추가한 후 새로운 상태의 이름을 ‘State 2’에서 ‘Complete’로 수정합니다.

‘Complete’ 상태의 아이템을 배경색을 회색으로, 라벨을 ‘Complete’로 수정합니다.

‘Download’ 상태의 아이템을 선택하고, 인터랙션을 추가합니다.

- Title : Go complete

- Trigger : Tap

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : Complete

- Delay : 9000(ms)

인터랙션을 저장할 때 아래와 같은 메시지 박스가 나타나면 “Don’t ask me again”을 체크하고 “CANCEL”을 선택합니다(트랜지션 자동 생성 기능 비활성화).

이 인터랙션을 통해 ‘Download’ 버튼을 탭하고 9초가 흐르면 상태가 바뀌어서 ‘Complete’ 버튼으로 바뀌는 동작이 이루어집니다.

프로젝트를 저장하고 미리보기로 확인해 봅니다.

<리셋 버튼 제작>

트랜지션 및 버튼 상태 변화가 모두 끝난 후 처음 상태로 되돌리기 위한 리셋 버튼을 만듭니다.

스크린 ‘HOME’으로 돌아와서 리셋을 위한 버튼을 만듭니다.

리셋 버튼에 다음의 인터랙션을 추가합니다.

- Title : Go reset state

- Trigger : Tap

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

Callback을 체크하고 다시 이어서 인터랙션을 추가하고 저장합니다.

- Action : Set variable

- Variable Name : download (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

프로젝트를 저장하고 미리보기로 확인합니다.

<리셋 버튼 감추기 / 보이기>

리셋 버튼은 처음에는 보이지 않다가 다운로드가 끝나면 나타나고, 리셋 버튼을 누르면 사라지는 동작을 해야 합니다. 이를 위해서 ‘Download’ 버튼과 ‘Reset’ 버튼에 각각 인터랙션을 추가해야 합니다.

먼저 스크린 ‘HOME’에서 ‘reset button’의 레어어에서 ‘레이어 감추기’ 버튼을 클릭합니다.

“download button” Container를 더블 클릭하여 컨테이너 창으로 이동한 후 상태 ‘Download’에 있는 ‘download button’을 선택하고, ‘Go complate’ 인터랙션에 콜백 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : reset button

- Property : Visibility

- Value type : Custom value

- New Value : check

- Duration : 400

- Easing : Linear

- Delay : 0

스크린 ‘HOME’으로 돌아와서 ‘reset button’을 선택하고, “+ ADD INTERACTIONS”를 클릭하여 두 번째 인터랙션을 추가합니다.

- Title : Reset button show

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : reset button

- Animation type : Fade item

- Fade to : 0

- Duration : 400

- Easing : Linear

- Delay : 0

- Loop animation : uncheck

프로젝트를 저장하고 미리보기로 확인합니다.

다운로드 바가 올라가는 모습

다운로드가 끝나고 버튼이 'Complete'로 상태가 변화한 후 'Reset' 버튼이 나타난 모습.

리셋 버튼을 클릭하여 초기 화면으로 돌아온 모습.

Proto.io에서 제공하는 라이브러리에는 ‘Progress bar’가 있어서 간단한 방법으로 진행도를 그래프로 보여주는 것을 애니메이션으로 쉽게 표현할 수 있습니다. 다만 이 진행도를 수치로 나타내는 기능은 없는데 약간의 편법을 통해 이를 구현할 수 있습니다.

<초기화 세팅 작업>

먼저 아래와 같이 작업을 진행하는 스크린과 상태의 이름을 수정합니다.

- 스크린 제목 : HOME

- 스크린 상태 1 : Default

- 스크린 상태 2 : Reset

진행도가 저장될 변수를 작성합니다. 상단의 (X) Variables를 클릭하고 아래와 같이 변수를 작성합니다.

- Name : downloader

- Type : Numeric

- Value : 빈칸

- Evaluate : check

스크린의 상태가 Default 인 것을 확인하고 스크린에 인터랙션을 추가합니다. Proto.io는 이벤트(트리거)가 발생할 수 있는 거의 모든 곳에는 인터랙션을 적용할 수 있습니다.

인터랙션을 아래와 같이 설정합니다.

- Title : Reset

- Trigger : Screen before show

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

Callback을 체크하고 첫 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

Callback을 체크하고 두 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

이는 HOME 스크린이 보이기(show) 전에 동작하는 인터랙션으로 변수와 상태를 초기값으로 돌리는 역할을 합니다.

<인터페이스 제작>

라이브러리에서 Text, Rectangle, Button with background 등의 컴포넌트를 캔버스로 가져와서 실제로 동작을 시키기 위한 인터페이스를 만듭니다.

(1) 진행 막대 (Progress bar) 제작

Rectangle로 적당한 길이의 진행 막대를 만듭니다. 이름은 ‘progress bar’로 합니다.

진행 막대를 마우스 오른 클릭하고, ‘Convert to container’를 선택하여 컨테이너로 변환합니다.

“progress bar” Container를 더블 클릭하거나 좌측 상단의 CONTAINERS 탭을 통해 컨테이너 편집 창으로 들어갑니다.

아이템 ‘progress bar’를 왼쪽으로 이동시켜서 컨테이너 영역 밖으로 옮깁니다(X : -200).

옮겨진 아이템 ‘progress bar’를 마우스 우측 클릭한 후 Duplicate를 선택, 복제하고 이를 콘테이너 영역 안으로 옮깁니다(X : 0).

왼쪽의 ‘progress bar’의 배경색을 눈에 띄는 색으로 수정하고, 레이어의 위치도 복제본 ‘progress bar 2’의 위로 옮깁니다. 마찬가지로 ‘progress bar 2’ 역시 적당한 배경색으로 수정합니다.

(2) 진행 막대 트랜지션 적용

진행 막대가 오른쪽으로 이동하는 애니메이션을 만들기 위해 트랜지션을 추가해야 합니다. 그 전에 먼저 상태의 제목을 알기 쉽게 ‘Progress start’로 바꿉니다.

“+ NEW CONTAINER STATE”를 클릭하여 현재 상태가 복제된 새로운 상태를 만듭니다. 그리고 이름도 ‘Progress end’로 바꿉니다.

새롭게 만들어진 상태 ‘Progress end’에서 아이템 ‘progress bar’의 위치를 컨테이너 영역 안쪽 원래의 위치로 옮깁니다(X : 0).

상태 ‘Progress start’와 ‘Progress end’ 사이에 애니메이션을 넣기 위해서 “STATE TRANSITIONS (0)” 탭을 클릭합니다.

“+ NEW STATE TRANSITION”을 클릭하고 새로운 트랜지션을 생성합니다.

애니메이션 레이어의 우측에 있는 애니메이션 종류 아이콘을 클릭하고, 아래와 같이 설정합니다.

- Delay : 0

- Duration : 9

- Easing : Linear

(수정한 후 다시 확인해보면 Duration 값에 약간의 변동이 생기지만 그대로 둡니다)

재생 버튼을 클릭하여 애니메이션을 확인해봅니다.