uniform speed along path
segment parameter t로 움직이면 곡선 구간에서 속도가 달라집니다. arc-length LUT로 균일 속도를 만듭니다.
데모에서 볼 것
pathD = M 40 160 C 40 20, 600 20, 600 160
- progress % 슬라이더
- 주황 dot —
sampleMotionAlongPathByParameter(SMIL 느낌) - 파랑 dot —
sampleMotionAlongPathUniform+ lookup - readout: lookup
stepsPerCurve,totallength
import {
buildArcLengthLookup,
sampleMotionAlongPathByParameter,
sampleMotionAlongPathUniform,
parsePathD
} from "svg-matrix-core";
const segments = parsePathD(pathD);
const lookup = buildArcLengthLookup(segments, { stepsPerCurve: 48 });
const byParam = sampleMotionAlongPathByParameter(segments, 0.5);
const uniform = sampleMotionAlongPathUniform(segments, 0.5, { lookup });
비교
| API | progress 의미 |
|---|---|
sampleMotionAlongPathByParameter | segment index 비율 |
sampleMotionAlongPathUniform | arc length 비율 (LUT) |
sampleMotionAlongPath | 094 flatten length |
Core API
| 함수 | 역할 |
|---|---|
buildArcLengthLookup | length table |
sampleMotionAlongPathUniform | 균일 s |
sampleMotionAlongPathByParameter | parameter t |
관련
오늘의 핵심
“같은 5초”라도 parameter와 arc length는 다른 궤적 — 아이콘·모션 디자인은 uniform이 자연스럽습니다.