MOVARO

Appearance

ALPHA

Wiggle Fade Expression ​

시간이 지남에 따라 흔들림이 점점 커지거나 작아지는 효과입니다.

Preview ​

시간에 따라 wiggle의 amplitude가 변합니다. 충격 후 잔잔해지거나, 긴장감이 고조되는 장면에 유용합니다.

Fade In
Fade Out

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Code ​

Wiggle Fade In (점점 커지는 흔들림) ​

javascript
// 시작할 때 잔잔하다가 점점 커지는 흔들림
freq = 5;
maxAmp = 50;
fadeTime = 2;  // 최대 강도까지 걸리는 시간(초)

amp = Math.min(time / fadeTime, 1) * maxAmp;
wiggle(freq, amp);

Wiggle Fade Out (점점 작아지는 흔들림) ​

javascript
// 강하게 시작해서 점점 잔잔해지는 흔들림
freq = 5;
startAmp = 50;
decay = 1.0;

amp = startAmp / Math.exp(time * decay);
wiggle(freq, amp);

특정 시간 구간에서만 흔들림 ​

javascript
// 1초~3초 사이에만 흔들림
freq = 5;
amp = 50;
startTime = 1;
endTime = 3;

if (time >= startTime && time <= endTime) {
  wiggle(freq, amp);
} else {
  value;
}

Parameters ​

파라미터설명
freq초당 흔들림 횟수
maxAmp / startAmp최대 흔들림 크기
fadeTimeFade In에 걸리는 시간
decayFade Out 감쇠율

Examples ​

천천히 시작되는 흔들림 ​

javascript
freq = 3;
maxAmp = 30;
fadeTime = 5;

amp = Math.min(time / fadeTime, 1) * maxAmp;
wiggle(freq, amp);

빠르게 감소하는 흔들림 ​

javascript
freq = 8;
startAmp = 100;
decay = 2.0;

amp = startAmp / Math.exp(time * decay);
wiggle(freq, amp);

키프레임 이후 감소하는 흔들림 ​

javascript
// 마지막 키프레임 이후부터 흔들림 감소
freq = 5;
amp = 50;
decay = 1.5;

n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}

if (n > 0) {
  t = time - key(n).time;
  currentAmp = amp / Math.exp(t * decay);
  wiggle(freq, currentAmp);
} else {
  value;
}

Tips ​

사용 사례

  • Fade In: 긴장감이 고조되는 장면
  • Fade Out: 충격 후 안정되는 장면
  • 구간 지정: 특정 이벤트 동안만 흔들림

자연스러운 전환

fadeTime이나 decay 값을 조절하여 급격하거나 부드러운 전환을 만들 수 있습니다.