Wiggle Expression
속성에 자연스러운 랜덤 흔들림을 추가하는 가장 기본적이고 강력한 익스프레션입니다.
Preview
wiggle(freq, amp) - 속성에 랜덤한 흔들림을 추가합니다.
※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.
Code
javascript
// Wiggle Expression
// 자연스러운 랜덤 흔들림
wiggle(freq, amp);기본 사용
javascript
wiggle(5, 50); // 초당 5번, 50픽셀 범위로 흔들림한 축만 흔들기
javascript
// X축만 흔들기
[wiggle(5, 50)[0], value[1]]
// Y축만 흔들기
[value[0], wiggle(5, 50)[1]]시간에 따라 감소하는 흔들림
javascript
// 시간이 지나면서 흔들림 감소
amp = 50;
freq = 5;
decay = 1.0;
wiggle(freq, amp / Math.exp(time * decay));Parameters
| 파라미터 | 설명 |
|---|---|
freq | 초당 흔들림 횟수. 값이 클수록 빠르게 흔들립니다. |
amp | 흔들림의 크기. 값이 클수록 넓은 범위로 움직입니다. |
Examples
미세한 흔들림 (Subtle Shake)
※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.
살짝 떨리는 미세한 움직임입니다.
javascript
wiggle(3, 10);강한 흔들림 (Heavy Shake)
※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.
빠르고 강하게 흔들리는 효과입니다.
javascript
wiggle(10, 100);천천히 떠다니는 효과 (Float)
※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.
느리게 둥둥 떠다니는 효과입니다.
javascript
wiggle(0.5, 30);Tips
Seed 값 고정
같은 흔들림 패턴을 재현하려면 seedRandom을 사용하세요:
javascript
seedRandom(123, true);
wiggle(5, 50);성능
freq 값이 너무 높으면 렌더링 속도가 느려질 수 있습니다. 일반적으로 1~10 사이 값을 권장합니다.
