CSS 큐빅 베지어 생성기

이징 함수는 애니메이션이 어떻게 빨라지고 느려지는지를 정합니다. CSS(그리고 Web Animations API와 여러 게임 엔진)에서는 cubic-bezier(x1, y1, x2, y2)로 씁니다. (0, 0)에서 (1, 1)까지의 곡선을 두 핸들로 다듬어 움직임을 만드는 방식입니다. 이 생성기는 CSS 키워드, easings.net의 인기 곡선(easeOutCubic, easeInOutQuart, easeOutBack…), 직접 만든 핸들을 제공하고, 곡선을 그래프로 그리고, 그 곡선으로 공을 움직이며, 지속 시간의 10%마다 진행률을 표로 보여 줍니다.

사용 방법

1. 프리셋을 고르거나 "직접 입력"을 고르고 x1, y1, x2, y2를 입력합니다.
2. 지속 시간과 애니메이션할 속성을 정합니다.
3. 미리보기의 공을 보고 진행률 표를 읽습니다.
4. transition, animation 또는 JavaScript 코드를 복사합니다.

계산식

x(u) = 3(1−u)²u·x1 + 3(1−u)u²·x2 + u³ · y(u) = 3(1−u)²u·y1 + 3(1−u)u²·y2 + u³

시간 비율 t에 대해 곡선 매개변수 u를 x(u) = t로 풀고(뉴턴–랩슨법, 안 될 때는 이분법), y(u)를 진행률로 보고합니다. x1과 x2는 0~1 사이여야 하고, y 값이 0~1을 벗어나면 목표를 지나칩니다.

예시

키워드 ease는 cubic-bezier(0.25, 0.1, 0.25, 1)입니다. 지속 시간의 절반 시점에 요소는 이미 거리의 80.24%를 지나서, ease가 빠르게 시작해 부드럽게 끝나는 느낌을 줍니다. ease-in(0.42, 0, 1, 1)은 같은 시점에 31.54%밖에 가지 못합니다. easeOutBack은 목표를 지나칩니다. 절반 시점에 108.74%에 있다가 되돌아옵니다.