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

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

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

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

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

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