[프로토파이] 실행시 자동 숫자 카운팅 (그래프 없이)

앱 실행시 숫자가 0부터 특정 숫자까지 자동으로 카운팅되는 화면을 프로토파이로 만들어보겠습니다.

캐시워크에서 내 걸음수를 볼 수 있는 화면에서 이런 모션이 사용되지요.

 

만약 숫자와 함께 막대 그래프가 채워지는 모션이 궁금하다면 이전 포스팅을 참고하세요.

https://tosaveyou.tistory.com/2

 

 

미리보기

시작시 자동으로 숫자가 카운팅되는 화면

 

 

설계

 

 

만들기

1. 프로토파이 불러오기

스케치에서 작업한 시안을 불러오거나 직접 화면을 프로토파이에서 만듭니다.

오늘 필요한 레이어는 카운팅 될 숫자가 적힐 text 레이어 하나만 있으면 됩니다.

해당 text 레이어에 우선 0으로 적어줍니다. 시작은 0부터 카운팅될 예정입니다.

 

 

2. Trigger / Response 설정

앱이 실행되면 또는 페이지가 실행되면 (trigger)

특정 텍스트가 반응/변경되도록 하라 (Response)

 

이렇게 실행할 것이기 때문에, Trigger는 Start로 Reponse는 Text로 설정합니다.

 

 

 

 

3. Text 설정창

Response의 Text의 우측 설정창을 보시면 여러가지 변경들을 할 수 있습니다.

 1  우선 Response의 대상 레이어를 선택해줍니다. '카운트' 라는 레이어의 텍스트를 0부터 특정 숫자까지 변경해줄 것이기때문에 '카운트' 라는 레이어를 선택해줍니다. 어떤 Response를 선택하든 Response 대상 레이어 지정은 필수입니다.

 

 

 2  '카운트' Text의 콘텐츠를 어떻게 바꿔줄지 바꿉니다. 특정 트리거가 있을 때 단순 텍스트를 변경할 것인지 함수(Fomula)를 이용한 변경을 할 것인지를 셀렉트 박스로 정할 수 있습니다.

2-1) 우리는 Fomula를 선택해줍니다. 

2-1) 그리고 나면 아래에 Fomula 를 적는 빈칸이 나타납니다. 마우스로 클릭하면 우측에 fx 라는 텍스트가 나타납니다. 클릭합니다.

 

2-3) 숫자를 자동으로 카운팅할 것이기 때문에 number 함수를 사용합니다.

그리고 괄호 안에 '카운트'라는 레이어의 텍스트의 숫자를 바꿀 것이기 때문에 '카운트'.text 를 입력해줍니다.

그리고 뒤에 +102를 입력해줍니다. (이 숫자는 설정이 다 끝난 후 숫자량에 맞게 바꾸시면 됩니다.)

 

 

 3  Start Delay 와 Repeat 값을 조절해줍니다.

Start Delay 는 해당 리스폰스가 얼마나 늦게 스타트될지를 조절할 수 있습니다. 0.2 딜레이를 주어 앱 시작 후 약간 딜레이를 준 후 카운팅이 되도록 합니다.

Repeat 는 해당 리스폰스를 반복할 수 있습니다. 23번만큼 0.01초의 속도만큼 반복하겠다는 뜻입니다. 

아까 fx 칸에 입력했던 102가 23번만큼 반복되므로 0부터 카운팅되어 최종 숫자는 (102x23) = 2346이 나오게 됩니다.

이 숫자들을 활용하여 원하는 숫자만큼 카운팅 되도록 할 수 있습니다.

 

 

 

4. 덧붙이는 말

감사합니다.