3차 베지어 생성기

큐빅 베지어(x1, y1, x2, y2)를 손으로 입력하고 페이지를 다시 로드하여 느낌을 확인하는 것은 애니메이션을 조정하는 느린 방법입니다. 이 생성기는 루프를 닫습니다. 곡선의 제어점 핸들을 드래그하거나 x1/y1/x2/y2 필드에 정확한 숫자를 입력하면 곡선, 복사 가능한 CSS 문자열 및 라이브 애니메이션 미리 보기가 변경될 때마다 모두 업데이트됩니다. 빌드 단계도 없고 다시 로드도 없습니다.

두 축은 의도적으로 다르게 작동합니다. x1과 x2는 0과 1 사이에 고정되어 있습니다. 이는 CSS 사양에서 실제로 큐빅 베지어() 타이밍 함수에 대해 요구하는 것이기 때문입니다. 해당 범위를 벗어나는 값은 단순히 유효하지 않습니다. y1 및 y2에는 이러한 제한이 없습니다. 상자 상단 위 또는 하단 아래로 핸들을 드래그하면 곡선이 시작 또는 끝을 지나서 오버슛됩니다. 이는 스프링 및 바운스 스타일 효과가 단일 여유 곡선에서 만들어지는 것과 정확히 같은 방식입니다.

숫자를 보는 것은 동작을 보는 것과 같지 않으므로 미리보기에서는 두 개의 동일한 공이 루프에서 나란히 실행됩니다. 하나는 사용자 정의 곡선을 사용하여 움직이고 다른 하나는 평범하고 일정한 선형 속도로 움직입니다. 스타일시트에 도달하기 전에 이징 곡선이 실제로 원하는 느낌을 생성하는지 여부를 알 수 있는 가장 빠른 방법은 경주를 관찰하는 것입니다. CSS 자체의 Ease-in-out 키워드 뒤의 실제 숫자, 바운스라고 부르는 정직한 오버슈트 근사치, Google이 게시한 머티리얼 디자인 표준 곡선 등 사전 설정된 페이지는 빈 제어점이 아닌 드래그할 수 있는 준비된 시작점입니다.

모든 것이 브라우저에서 로컬로 실행됩니다. 업로드도 없고, 계정도 없고, 서버 왕복도 없으며, 페이지가 로드된 후에도 생성기는 오프라인으로 계속 작동합니다.