Snap Expression

값을 특정 간격이나 단위로 딱딱 끊어지게 만드는 스냅 효과입니다.

Preview

Math.round()로 값을 특정 단위로 끊어지게 합니다. 그리드 정렬, 픽셀 퍼펙트에 유용합니다.

Smooth

Snap

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

Code

기본 스냅 (값 반올림)

// Snap Expression
// 값을 특정 단위로 스냅

snapValue = 10;  // 스냅 단위

Math.round(value / snapValue) * snapValue;

그리드 스냅 (Position)

// Position에 적용 - 그리드에 맞춰 정렬
gridSize = 50;

x = Math.round(value[0] / gridSize) * gridSize;
y = Math.round(value[1] / gridSize) * gridSize;

[x, y];

각도 스냅 (Rotation)

// Rotation에 적용 - 45도 단위로 스냅
angleSnap = 45;

Math.round(value / angleSnap) * angleSnap;

Snap Types

반올림 (Round)

// 가장 가까운 값으로
snapValue = 10;
Math.round(value / snapValue) * snapValue;

내림 (Floor)

// 항상 작은 값으로
snapValue = 10;
Math.floor(value / snapValue) * snapValue;

올림 (Ceil)

// 항상 큰 값으로
snapValue = 10;
Math.ceil(value / snapValue) * snapValue;

Parameters

파라미터	설명
snapValue	스냅 단위. 값이 클수록 더 큰 단위로 끊김
gridSize	그리드 크기 (2D 스냅용)
angleSnap	각도 스냅 단위

Examples

픽셀 퍼펙트 (1px 스냅)

// Position에 적용 - 서브픽셀 제거
[Math.round(value[0]), Math.round(value[1])];

프레임 스냅 (시간)

// Time Remap에 적용 - 프레임 단위로 끊김
fps = 24;
frameTime = 1 / fps;

Math.floor(value / frameTime) * frameTime;

퍼센트 스냅

// 10% 단위로 스냅
snapPercent = 10;
Math.round(value / snapPercent) * snapPercent;

스케일 스냅

// Scale에 적용 - 25% 단위로
snapScale = 25;
s = Math.round(value[0] / snapScale) * snapScale;
[s, s];

Advanced

부드러운 스냅 (스냅 + 이징)

// 스냅된 값으로 부드럽게 이동
snapValue = 50;
smoothness = 0.1;  // 0~1 (작을수록 빠름)

targetValue = Math.round(value / snapValue) * snapValue;

// 부드럽게 보간
prevValue = valueAtTime(time - thisComp.frameDuration);
prevValue + (targetValue - prevValue) * (1 - smoothness);

시간 기반 스냅 (특정 간격으로 값 변경)

// 0.5초마다 값이 변경
interval = 0.5;
snapTime = Math.floor(time / interval) * interval;
valueAtTime(snapTime);

마그네틱 스냅 (특정 값에 끌림)

// 특정 값 근처에서만 스냅
snapPoints = [0, 100, 200, 300];
magnetRange = 20;  // 스냅 범위

result = value;
for (i = 0; i < snapPoints.length; i++) {
  if (Math.abs(value - snapPoints[i]) < magnetRange) {
    result = snapPoints[i];
    break;
  }
}
result;

홀드 키프레임 효과

// 키프레임 값을 다음 키프레임까지 유지
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time && n > 1) n--;
  key(n).value;
} else {
  value;
}

Tips

픽셀 퍼펙트

움직이는 그래픽이 흐릿해 보인다면 Position을 정수로 스냅하여 픽셀 퍼펙트하게 만드세요.

스톱모션 효과

시간 기반 스냅으로 낮은 프레임레이트의 스톱모션 느낌을 만들 수 있습니다.

그리드 정렬

UI 요소들을 일정한 그리드에 맞추고 싶을 때 그리드 스냅이 유용합니다.

애니메이션 중 스냅

움직이는 도중 스냅하면 끊어지는 느낌이 납니다. 의도한 효과가 아니라면 최종 위치에서만 스냅하세요.