Cubic Bezier 생성기
두 개의 제어점을 드래그하여 맞춤형 CSS cubic-bezier() 타이밍 함수를 디자인하고, 선형 기준과 실시간 비교한 후 완성된 값을 복사하세요.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
cubic-bezier(x1, y1, x2, y2)를 직접 입력하고 페이지를 새로고침하며 느낌을 확인하는 것은 애니메이션을 조율하는 느린 방법입니다. 이 생성기는 그 과정을 하나로 연결합니다. 곡선 위의 제어점 핸들을 드래그하거나, x1/y1/x2/y2 필드에 정확한 숫자를 입력하면, 곡선과 복사 가능한 CSS 문자열, 실시간 애니메이션 미리 보기가 매 변경 시마다 업데이트됩니다. 빌드 과정도, 새로고침도 필요 없습니다.
두 축은 의도적으로 다르게 동작합니다. x1과 x2는 0과 1 사이로 고정됩니다. CSS 명세가 cubic-bezier() 타이밍 함수에 실제로 요구하는 사항이기 때문입니다. 이 범위를 벗어난 값은 유효하지 않습니다. y1과 y2에는 그런 제한이 없습니다. 상자 위쪽이나 아래쪽 바깥으로 핸들을 드래그하면 곡선이 시작점 앞이나 끝점 뒤로 오버슈트합니다. 이것이 바로 단일 이징 곡선으로 스프링이나 바운스 스타일 효과를 만드는 원리입니다.
숫자를 보는 것과 움직임을 보는 것은 다릅니다. 따라서 미리 보기는 두 개의 동일한 공을 나란히 반복해서 움직입니다. 하나는 사용자 지정 곡선으로, 다른 하나는 일정한 선형 속도로 움직입니다. 둘의 움직임을 비교하면 이징 곡선이 실제로 원하는 느낌을 만들어내는지 스타일시트에 적용하기 전에 가장 빠르게 판단할 수 있습니다. 프리셋 페이지(CSS 자체의 ease-in-out 키워드에 해당하는 실제 숫자, 일부에서 바운스라고 부르는 솔직한 오버슈트 근사값, Google이 공개한 머티리얼 디자인 표준 곡선)는 빈 제어점 대신 드래그하여 시작할 수 있는 준비된 출발점입니다.
모든 작업은 브라우저 내에서 로컬로 실행됩니다. 업로드, 계정, 서버 왕복이 없으며, 페이지가 로드된 후에는 오프라인에서도 생성기가 계속 작동합니다.