[프로토파이] 실행시 자동 카운팅되는 숫자와 막대 그래프 만들기

 

 

앱 실행시 특정 수치만큼 막대 그래프가 채워지면서 숫자도 같이 카운팅되는 모션을 프로토파이로 만들어보겠습니다.

대시보드를 사용하는 UI 에서 많이 사용되는 모션이지요.

 

미리보기

 

설계

설계를 먼저 합니다. 

앱실행시 그래프가 채워지고 그래프가 채워지는 것을 감지하여 숫자 텍스트가 변경되도록 만들어보겠습니다.

아래 이미지처럼 도식화가 되겠지요.

 

 

 

만들기

1. 프로토파이 불러오기

스케치에서 작업한 시안을 불러온 후 레이어를 정리합니다.

카운팅 될 숫자와 그래프 배경, 채워질 사각형이 있으면 됩니다.

 

 

 

2. 채워질 사각형 영역의 사이즈 줄이기

앱 실행시 위로 채워질 사각형을 선택하고 포지션을 중앙 아래로 선택한 뒤 사이즈를 0으로 줄입니다.

그러면 해당 사각형이 그래프 바닥에 붙어서 0으로 줄어듭니다.

 

 

3. Response - Scale

Scale 리스폰스를 추가하여 설정창에서 설정을 변경해줍니다.

 

설정값의 의미는

<'채워지는 그래프' 레이어의 '높이'값을 '그래프 배경' 레이어의 '높이'값의 40%까지 크기 변경(Scale)이 되도록 한다.>

 

 

 

 

 

 

 

 

4. 중간 미리보기

여기까지 하면 이렇게 미리보기가 될 거예요

 

 

5. Trigger - Detect 를 추가

트리거 Detect 를 추가하여 설정값을 변경해줍니다.

설정값의 의미는 <'채워지는 그래프' 레이어의 height 값이 감지될 때> 입니다.

 

6. Response Text 를 추가해줍니다.

리스폰스 Text 를 추가 후 설정값을 변경해줍니다.

'숫자 카운트' 레이어를 선택하고 이 레이어의 텍스트를 어떻게 변경해줄 거냐에 대한 'Content' 설정들을 변경하는데요.

함수와 수식을 사용합니다.

 

 

수식의 의미를 자세히 풀어보겠습니다.

 

일단

 

(채워지는 그래프 레이어 높이값 / 배경 레이어 높이값) * 100

이 수식을 써주면 '채워지는 그래프' 레이어 높이값이 '배경' 레이어 높이값의 몇 퍼센트 정도 채워졌는지를 알 수 있습니다.

 

만약 배경이 100px 이고 그래프 레이어가 50px 이면 

(50/100) * 100 = 50이죠? 그러면 아래 텍스트가 50으로 변경되게 되는 겁니다.

 

근데 이렇게만 쓰면 되지 왜 함수인 ceil 을 이용하냐면

ceil 은 소수점을 반올림 해줍니다.

위 예시에서는 딱 떨어지는 높이값으로 계산을 해서 50이 나온 거지만

제가 만든 예시 레이어는 배경이 257px 이고 채워지는 그래프는 257의 40%가 채워지도록 아까 Start 트리거에 걸어놓아서 정확한 높이값을 알 수 없습니다. 

이런 경우 정확한 높이값을 모를 뿐더러 딱 봐도 소수점까지 나오겠죠. 그래서 소수점을 없애주는 함수를 앞에 붙여주는 것입니다.

 

 

 

 

 

 

7. 완성

새로고침을 하면 자동으로 그래프가 채워지면서 카운트도 그에 따라 촤르르 변경됩니다.

 

 

 

 

 

만약 수치를 변경하고 싶다면 Scale 설정값에서 0.4 부분을 변경해주면 됩니다.

 

감사합니다.