[css] cubiz & cubic-bezier

🔎 cubic-bezier 란?

cubic-bezier() function은 css에서 transition 속성 혹은 transition-timing-function 속성에서 bazier 곡선 원리를 사용하여 전환 시작과 끝까지의 효과를 제어하는 데 쓰입니다.

🔎 베지어 곡선의 개념

컴퓨터 그래픽에서 베지어 곡선이란 우리가 곡선을 매끄럽게 잘 그릴 수 있게끔 해주는 곡선 알고리즘입니다. 베지어 곡선은 1차 베지어 곡선(linear-bezier-curve), 2차 베지어 곡선(quadratic-bezier-curve), 3차 베지어 곡선(cubic-bezier-curve) … n차 베지어 곡선이 있는데, 우리가 가장 많이 사용하는 것은 2차와 3차 정도가 될 것 같습니다.

* 1차 베지어 곡선(linear-bezier-curve)
* 2차 베지어 곡선(quadratic-bezier-curve)
* 3차 베지어 곡선(cubic-bezier-curve)
* n차 베지어 곡선

눈으로 직접 그래프가 움직이는 것을 보면서 이해하는 것이 더 빠르게 이해가 되기 때문에 1차 베지어 곡선(linear-bezier-curve)의 그래프를 눈으로 직접 보겠습니다.

1차 베지어 곡선(linear-bezier-curve)

P0에서 P1으로 M이 움직일 때의 비율에 맞춰 t값이 올라가고 있습니다. 1차 베지어 곡선은 점이 목적지까지의 움직임으로써 어렵지 않게 이해할 수가 있습니다.

그렇다면 이제 2차 베지어 곡선의 움직임을 보겠습니다!

2차 베지어 곡선(quadratic-bezier-curve)

2차 베지어 곡선은 P0, P1, P2로 점이 하나가 더 늘어난 형태입니다. 최초로 선을 그리기 위해서 두 개의 점을 가지는 것이 1차 그리고 실질적으로 곡선을 그리기 위해서 기준점을 하나 늘린 것이 2차 베지어 곡선입니다.

우리가 그리고자 하는 곡선은 두개의 점이 각자의 목표지점을 향해서 움직이면서 자연스럽게 곡선을 그리게 됩니다. 베지어 곡선은 이러한 특성을 가지고 움직입니다. 우리가 이 것을 식으로 표현하면 직관적으로 보이지 않아서 바로 이해하기가 어렵지만 이렇게 그림이 실질적으로 움직이니 이해가 더 쉽습니다.

이제 3차 베지어 곡선의 움직임을 약간은 예상해보면서 보겠습니다.

3차 베지어 곡선(cubic-bezier-curve)

(4개의 컨트롤 포인트를 가지는 Cubic-bezier curve)

3차 베지어 곡선은 3개의 점. 어떻게 보면 2개의 선이 움직이는 것 처럼 보입니다. 어떻게 보면 2차 베지어 곡선과도 크게 달라 보이는 점은 없습니다. 이 이후에 베지어 곡선들 즉, n차 베지어 곡선들을 생각해봤을때도 대충 예상이 됩니다! 점이 늘어나고 선이 늘어나겠죠.

우리가 곡선을 그릴 때 3차 이상의 베지어 곡선은 크게 필요하지 않기 때문에 여기까지만 알아봐도 좋을 것 같습니다.

우리가 css로 transition-timing-function을 사용할 때 3차 베지어 곡선(cubic-bezier-curve)를 사용합니다.

얼핏 보면 우리가 알게 된 3차 베지어 곡선은 이용할 때 점이 네 개로 이루어져 있어서 cubic-bezier의 인자로 점의 개수 4 개가 들어간 것처럼 보이지만, 사실은 (x1, y1, x2, y2)로 이루어져 있습니다. (이것만 알면 쉬울 수도 있습니다.)
cubic-bezier(x1, y1, x2, y2) 와 사실상 같습니다.

그러면 나머지 두 개의 점은 어디 있을까요? 이것은 기본적으로 우상향의 직선 그래프로 이용하고 있기에 설정을 안 해도 되는 것입니다. 그림으로 보겠습니다.

우리는 두가지 검정색 상자의 위치만 조절해서 애니메이션의 움직임을 조절할 수가 있습니다. 이렇게 보니까 또 직관적으로 이해하기가 힘든 것 같습니다. 곡선과 애니메이션의 움직임이 어떠한 관계를 가지고 있는지 이해하기가 어렵습니다!

예시

말로는 이해가 하나도 안되니 직접 코드를 보겠습니다.
그러니까 transition 속성을 사용할 때 아래와 같은 값을 부여하면

.box {

  /* property name | duration | timing function | delay */

  transition: border-radius 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);

  background-color: rgb(255, 255, 0);

  width: 3rem;

  height: 3rem;

  border: 1px solid rgb(255, 0, 0);

  

  &:hover {

    border-radius: 50%;

  }

}

• 해당 엘리먼트의 width 를 0.5초 동안 제어하되
• 4개의 컨트롤 포인트 (0.25, 0.25, 0.75, 0.75) 를 가지는 cubic-bezier curve에 의거해 효과를 주겠다는 뜻입니다.
• 아래의 사진에서 네모난 점들 두 개의 위치를 (0.25, 025 아래 네모) 그리고 (0.75, 0.75 위 네모)가 정하고 있는 것입니다.

그래프를 그려보면 아래와 같이 일정한 속도로 진행됨을 알 수 있습니다.

사용

기본적으로 선언되어 있는 5가지 값이 있습니다.

ease(default)

기본값으로, (0.25, 0.1, 0.25, 1.0) 의 값을 가집니다.
처음과 끝은 상대적으로 느리게, 중간은 빠르게.

linear

위에서 설명한 것으로 직선 모양입니다.

(0.25, 0.25, 0.75, 0.75) 값을 가집니다.

ease-in

조금씩 완만하게 상승합니다.

처음은 느리고 갈수록 빨라집니다.

값은 (0.42, 0.0, 1.0, 1.0) 입니다.

ease-out

ease-in과 반대로 처음은 빠르고 갈수록 느려집니다.
값은 (0.0, 0.0, 0.58, 1.0) 입니다.

ease-in-out

디폴트값인 ease와 유사하지만 조금 더 완만하고 부드러운 느낌을 줍니다.
값은 (0.42, 0.0, 0.58, 1.0) 입니다.

더 참고해 볼 수 있는 글(🌟강추🌟)

1. 🔗베지어 곡선 잘 정리되어 있는 블로그
   베지어 곡선이 잘 정리되어 있습니다.
2. 🔗 https://matthewlein.com/tools/ceaser (🌟강추🌟)
   애니메이션이나 트랜지션 효과를 줄 때 아주 활용도가 높은 사이트가 하나 있습니다.

이 사이트에서 작은 네모 점 2 개의 위치를 수정해가면서 좌표의 수치 변화를 확인하고 움직임을 확인해보세요. `cubic-bezier(x1, y1, x2, y2)` 와 사실상 같다는 것을 알게 될 것입니다. 두 개의 점으로 만든 그래프의 기울기가 가파를수록 변화가 급격히 빨라지며 완만하면 느리게 변화합니다.

이 글은 옵시디언(Obsidian)에서 작성되었습니다. 티스토리에서 상대경로 링크는 작동하지 않습니다. 큰 이미지 파일은 업로드되지 않을 수 있습니다.