MOVARO

Appearance

ALPHA

Counter Expression ​

숫자가 점점 증가하거나 감소하는 카운터 애니메이션 효과입니다.

Preview ​

시간에 따라 숫자가 증가/감소하는 애니메이션입니다. Source Text에 적용합니다.

0
248
512
763
1,000
Count Up
0%
22%
45%
67%
87%
Percentage
10
8
5
2
0
Countdown

Code ​

기본 카운터 (Source Text에 적용) ​

javascript
// Counter Expression
// 숫자가 올라가는 효과

startNum = 0;       // 시작 숫자
endNum = 1000;      // 끝 숫자
duration = 3;       // 걸리는 시간(초)

progress = Math.min(time / duration, 1);
currentNum = Math.floor(startNum + (endNum - startNum) * progress);
currentNum.toString();

쉼표 포함 (천 단위 구분) ​

javascript
startNum = 0;
endNum = 1000000;
duration = 3;

progress = Math.min(time / duration, 1);
currentNum = Math.floor(startNum + (endNum - startNum) * progress);

// 천 단위 쉼표 추가
currentNum.toLocaleString();

소수점 포함 ​

javascript
startNum = 0;
endNum = 100;
duration = 3;
decimals = 2;  // 소수점 자릿수

progress = Math.min(time / duration, 1);
currentNum = startNum + (endNum - startNum) * progress;
currentNum.toFixed(decimals);

Parameters ​

파라미터설명
startNum시작 숫자
endNum끝 숫자
duration카운트 완료까지 걸리는 시간
decimals소수점 자릿수

Examples ​

카운트다운 ​

10
7
4
1
0
javascript
startNum = 10;
endNum = 0;
duration = 10;

progress = Math.min(time / duration, 1);
currentNum = Math.floor(startNum + (endNum - startNum) * progress);
currentNum.toString();

백분율 카운터 ​

0%
29%
58%
87%
javascript
endPercent = 87;
duration = 2;

progress = Math.min(time / duration, 1);
currentNum = Math.floor(endPercent * progress);
currentNum + "%";

돈 카운터 ​

$0
$12,500
$32,800
$50,000
javascript
startNum = 0;
endNum = 50000;
duration = 3;

progress = Math.min(time / duration, 1);
currentNum = Math.floor(startNum + (endNum - startNum) * progress);
"$" + currentNum.toLocaleString();

이징 적용 카운터 ​

0
333
666
1,000
Linear
0
580
890
1,000
Ease Out
javascript
startNum = 0;
endNum = 1000;
duration = 3;

// Ease Out 적용
t = Math.min(time / duration, 1);
progress = 1 - Math.pow(1 - t, 3);  // Cubic ease out

currentNum = Math.floor(startNum + (endNum - startNum) * progress);
currentNum.toLocaleString();

Advanced ​

키프레임 기반 카운터 ​

javascript
// 슬라이더 컨트롤과 연동
startNum = effect("Start")("Slider");
endNum = effect("End")("Slider");

Math.floor(linear(time, 0, 3, startNum, endNum)).toLocaleString();

랜덤 증가 효과 ​

javascript
// 약간의 불규칙성 추가
endNum = 1000;
duration = 3;
randomness = 50;

progress = Math.min(time / duration, 1);
base = Math.floor(endNum * progress);
random = Math.floor(Math.random() * randomness) - randomness/2;

Math.max(0, base + random * (1 - progress)).toLocaleString();

Tips ​

Source Text에 적용

이 익스프레션은 텍스트 레이어의 Source Text 속성에 적용합니다.

글꼴 선택

숫자 카운터에는 고정폭(Tabular) 숫자를 지원하는 글꼴을 사용하면 숫자가 바뀔 때 떨리지 않습니다.

Ease 추가

linear 대신 ease를 적용하면 처음엔 천천히, 끝에서 빠르게 등 다양한 느낌을 줄 수 있습니다.