'progress bar'에 해당되는 글 3건

<다운로드 진행도를 숫자로 출력하기>

프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 0~100까지 증가하는 숫자 애니메이션으로 구현하는 것입니다.

Proto.io에서 대부분의 상태 값 변화는 트리거에 의해 발생한다고 보면 됩니다. 예를 들어 ‘Slider bar’의 경우는 인디케이터가 사용자에 의해 위치가 변화되므로 그 중간 값의 변화를 변수에 저장할 수 있지만, ‘Progress bar’의 경우는 그 중간 값의 변화가 사용자의 행동과는 관계가 없기 때문에 그 값을 변수에 넣을 수 없습니다.

마찬가지로 현재 제작된 ‘Progress bar’도 계속 변화하는 위치 값을 변수로 보낼 수가 없기 때문에 이를 텍스트로 출력할 수 없습니다. 그렇기 때문에 일종의 편법으로, 애니메이션의 재생 시간인 (여기에서는 9000ms = 9초) 동안 순차적으로 증가되는 변수를 넣는 방법을 쓸 수 밖에 없습니다.

인터페이스에 숫자가 표시될 부분을 추가합니다. 모두 라이브러리의 Text를 사용했으며, 변화하는 텍스트의 이름은 ‘increase text’로 합니다. 

“download button” Container를 더블 클릭하여 컨테이너 내부로 들어간 후 ‘download button’을 선택하고 “+ ADD INTERACTIONS”를 클릭하여 새로운 인터랙션을 추가합니다.

아래의 인터랙션을 추가합니다.

- Title : Increase loop

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : increase text

- Animation type : Move item

- Move type : Move to (x,y) coordinates

- Move X to (px) : * (변화 없음)

- Move Y to (px) : * (변화 없음)

- Duration : 50

- Easing : Linear

- Delay : 0

- Loop animation : check

- Loop iterations : 100

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

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : {downloader}+1

- Delay : 0

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

- Action : Change property

- Screen : HOME

- Item : increase text

- Property : Text

- Value type : Read from variable

- Variable name : downloader (default: empty)

- Delay : 0

인터랙션을 저장하고, 지금 새롭게 만든 인터랙션의 위치를 위로 옮깁니다.

프로젝트를 저장하고 지금까지 작업한 결과물을 미리보기로 확인해봅니다.

지금까지의 작업을 한 장의 이미지로 정리하면 다음과 같습니다.

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

<다운로드 버튼 제작 - 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 값에 약간의 변동이 생기지만 그대로 둡니다)

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