cubic-bezier 이징

사용 방법

1. 이름 있는 곡선을 고르거나 숫자 네 개를 적습니다.
2. 표를 읽습니다. 각 시점에 움직임이 어디까지 갔는지 나옵니다.
3. 실제로 애니메이션할 시간을 지정하면 밀리초에 의미가 생깁니다.
4. 타이밍 함수를 복사합니다.

자주 묻는 질문

곡선을 그리지 않고 표로 보여 주는 이유는?

알고 싶은 것은 대개 “시작이 너무 느린가”, “끝이 너무 갑작스러운가”이고, 시간 대비 진행도 표가 거기에 바로 답하기 때문입니다. 그려진 곡선은 보기 좋지만 결국 눈으로 읽어 내야 합니다.

숫자 네 개는 무엇인가요?

제어점 두 개, x1·y1·x2·y2입니다. x는 시간이라 0에서 1 사이여야 합니다. y는 진행도이고 범위를 벗어나도 됩니다 — 지나쳤다 돌아오는 움직임이 그렇게 만들어집니다.

어느 것을 써야 하나요?

화면에 들어오는 것은 ease-out(처음 빠르고 끝에서 잦아듦). 나가는 것은 ease-in. 두 지점 사이 이동은 ease-in-out. linear는 스피너 말고는 거의 쓰지 않습니다.

back 곡선은 무엇인가요?

목적지를 살짝 지나쳤다 돌아오는 것입니다. 대화상자 같은 데 물리적인 느낌을 줍니다. 작고 빠른 움직임에 맞고, 큰 움직임에 쓰면 오작동처럼 보입니다.

서버로 전송되나요?

아니요. 브라우저 안에서만 동작하므로 입력한 내용은 컴퓨터를 벗어나지 않습니다.