3차 베지에 곡선 편집기

3차 베지에 곡선 편집기 기능

• 01

  곡선을 끌고 동작을 봅니다

  2개의 끌 수 있는 핸들이 베지에의 시작과 끝을 제어합니다. 함께 제공되는 볼 애니메이션은 선택한 기간 동안 곡선을 재생하므로 페이지를 떠나기 전에 초과 이동 및 완화 출력 느낌을 미리볼 수 있습니다.

• 02

  모든 표준 사전 설정

  CSS의 기본 제공 ease, linear, ease-in, ease-out, ease-in-out으로 시작한 후 조정합니다. 핸들을 이동하면 사전 설정이 자동으로 "custom" 으로 전환됩니다.

• 03

  한 번의 클릭으로 CSS 복사

  cubic-bezier() 값은 소수점 2자리 정밀도로 실시간 업데이트되며 transition-timing-function 또는 animation-timing-function에 직접 삽입할 수 있습니다.

3차 베지에 곡선 편집기 자주 묻는 질문

Y 값이 1을 초과하거나 0 미만으로 될 수 있는 이유는 무엇입니까?

0–1 범위 밖의 베지에 제어 지점은 초과 이동 및 미달 효과를 생성합니다——곡선은 정착하기 전에 끝점을 넘어갑니다. 이것이 "탄성" 완화 곡선을 만드는 방법입니다. X축은 0–1 범위 내에 있어야 합니다.

출력을 어떻게 사용합니까?

cubic-bezier(...) 문자열을 복사하여 모든 CSS transition-timing-function 또는 animation-timing-function 값에 붙여넣습니다. 모든 최신 브라우저에서 작동합니다.

미리보기가 CSS가 수행할 작업만큼 정확합니까?

예——미리보기는 브라우저가 전환에 사용하는 것과 동일한 3차 베지에 공식을 사용하여 볼을 0에서 100%까지 애니메이션화합니다. 기간 슬라이더를 사용하면 커밋하기 전에 느린 곡선과 빠른 곡선의 느낌을 받을 수 있습니다.

ease-in-out은 실제로 무엇을 의미합니까?

Ease-in-out은 천천히 시작하고, 중간에 속도를 높이고, 마지막에 다시 속도를 낮춥니다——cubic-bezier(0.42, 0, 0.58, 1) 곡선입니다. 대부분의 세련된 UI 동작의 기본값입니다. 실제 물체가 가속 및 감속하는 방식을 반영하기 때문입니다.