Cubic-bezier

Description of the cubic-bezier curve function

August 13, 2024

#math

Cubic-bezier 함수는 CSS 애니메이션에서 자주 사용되는 곡선 함수로, 애니메이션의 속도를 제어하는 데 사용됩니다. 이 함수는 네 개의 제어점을 사용하여 곡선을 정의하며, cubic-bezier(p1x, p1y, p2x, p2y)와 같은 형식을 가집니다. 여기서 p1p1과 p2p2는 제어점으로, 각각의 xx, yy 좌표가 애니메이션의 시작과 끝 지점 사이의 속도를 정의합니다.

Cubic-bezier 함수는 0 ≤ x ≤ 1 범위에서의 값을 입력받아, 0 ≤ y ≤ 1 범위에서의 값을 출력하는 곡선을 생성합니다. 이때, xx 값은 애니메이션의 진행 정도(시간)이며, yy 값은 애니메이션이 실제로 변화한 정도를 나타냅니다.

Cubic-bezier와 선형 보간 (Linear Interpolation)

Cubic-bezier 곡선은 네 개의 제어점을 기반으로 하는데, 이 제어점들은 다음과 같이 표현할 수 있습니다:

  • P0: (0,0)(0, 0) — 애니메이션 시작점
  • P1: (P1x,P1y)(P1x, P1y) — 첫 번째 제어점
  • P2: (P2x,P2y)(P2x, P2y) — 두 번째 제어점
  • P3: (1,1)(1, 1) — 애니메이션 끝점

Cubic-bezier 곡선은 각 점 사이의 선형 보간을 여러 번 반복하여 최종적인 곡선을 생성합니다. 이 과정은 다음과 같이 설명될 수 있습니다:

  1. 1차 보간 (Linear Interpolation):

    • t는 시간에 따라 0에서 1 사이의 값을 가집니다.
    • 첫 번째 제어점 간의 보간:
      • Q0=(1−t)∗P0+t∗P1Q0 = (1-t) * P0 + t * P1
      • Q1=(1−t)∗P1+t∗P2Q1 = (1-t) * P1 + t * P2
      • Q2=(1−t)∗P2+t∗P3Q2 = (1-t) * P2 + t * P3

  2. 2차 보간 (Linear Interpolation of Q):

    • Q0, Q1, Q2 간의 보간:
      • R0=(1−t)∗Q0+t∗Q1R0 = (1-t) * Q0 + t * Q1
      • R1=(1−t)∗Q1+t∗Q2R1 = (1-t) * Q1 + t * Q2

  3. 3차 보간 (Final Linear Interpolation):

    • R0와 R1 간의 보간을 통해 최종적으로 곡선 상의 점을 계산:
      • B(t)=(1−t)∗R0+t∗R1B(t) = (1-t) * R0 + t * R1

위의 과정을 통해, 각 시간 tt에 대해 곡선상의 점 B(t)B(t)를 계산할 수 있습니다. 이 곡선은 네 개의 제어점 P0,P1,P2,P3P0, P1, P2, P3에 의해 정의된 cubic-bezier 곡선을 따릅니다.

결과적으로, Cubic-bezier 곡선은 제어점들을 기반으로 여러 단계의 선형 보간을 통해 생성되며, 이 곡선은 애니메이션의 시간에 따른 변화 비율을 정의하는 데 사용됩니다. 예를 들어, cubic-bezier(0.25, 0.1, 0.25, 1.0)은 천천히 시작하여 중간에 느려진후 다시 빨라지는 형태로 동작합니다.