'다운로드'에 해당되는 글 2건

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

프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 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

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

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

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

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

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