linear() 이징 함수를 사용하여 CSS에서 복잡한 애니메이션 곡선 만들기

CSS에서 점 사이를 선형으로 보간하여 바운스 및 스프링 효과를 재현할 수 있는 완화 함수인 linear()를 소개합니다.

Bramus

CSS의 완화

CSS에서 요소를 애니메이션 처리하거나 전환할 때 animation-timing-function 및 transition-timing-function 속성을 사용하여 완화 함수로 값이 변경되는 속도를 제어합니다.

CSS에는 linear, ease, ease-in, ease-out, ease-in-out과 같은 여러 키워드가 프리셋으로 제공됩니다. 자체 완화 곡선을 만들려면 cubic-bezier() 함수를 사용하거나 steps() 완화 함수를 사용하여 단계 기반 접근 방식을 취합니다.

완화는 적절하게 사용하면 애니메이션 처리된 요소가 모멘텀을 모으는 것처럼 보이므로 무게감을 줍니다.

바운스 또는 스프링 효과와 같은 복잡한 곡선은 CSS에서 만들 수 없지만 이제 linear() 덕분에 놀라울 정도로 잘 근사화할 수 있습니다.

linear() 소개

CSS에서 완화를 정의하는 새로운 방법은 linear()를 사용하는 것입니다. 이 함수는 쉼표로 구분된 여러 정지를 허용합니다. 각 정지는 0부터 1까지의 단일 숫자입니다. 각 정지 사이에서 보간은 선형 방식으로 이루어지며 함수의 이름을 설명합니다.

animation-timing-function: linear(0, 0.25, 1);

이러한 정지는 기본적으로 등거리로 퍼져 있습니다. 이전 스니펫에서 이는 0.25의 출력 값이 50% 표시에서 사용됨을 의미합니다.

시각화된 linear(0, 0.25, 1)의 그래프는 다음과 같습니다.

정지가 등거리로 퍼지지 않게 하려면 선택적으로 정지 길이 를 전달할 수 있습니다. 하나의 값을 정지 길이로 전달할 때 시작점을 정의합니다.

animation-timing-function: linear(0, 0.25 75%, 1);

여기서 0.25의 출력 값은 50% 표시에서 사용되지 않지만 75%에서는 사용됩니다.

두 값을 정지 길이로 지정할 때 시작점과 끝점을 모두 정의합니다.

animation-timing-function: linear(0, 0.25 25% 75%, 1);

0.25의 출력 값은 시간의 25% 에서 75% 까지 사용됩니다.

복잡한 곡선 만들기

이전 예는 더 간단한 완화이지만 정밀도를 일부 절충하면 linear()를 사용하여 복잡한 완화 함수를 재현할 수 있습니다.

CSS에서 직접 표현할 수 없는 완화 유형인 이 바운스 완화 곡선을 JavaScript를 사용하여 정의합니다.

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

코드는 많은 것을 알려주지 않지만 시각화는 알려줄 수 있습니다. 다음은 파란색 곡선으로 시각화된 출력입니다.

곡선에 여러 정지를 추가하여 곡선을 단순화할 수 있습니다. 여기서 각 녹색 점은 정지를 나타냅니다.

linear()에 전달하면 결과는 원래 곡선과 비슷하지만 가장자리가 약간 더 거친 곡선이 됩니다.

녹색 애니메이션 처리된 상자를 파란색 상자와 비교하면 녹색 상자가 파란색 상자만큼 부드럽지 않다는 것을 알 수 있습니다.

하지만 정지를 충분히 추가하면 원래 곡선을 아주 잘 근사화할 수 있습니다. 다음은 업데이트된 버전입니다.

정지 수를 두 배로 늘리기만 해도 이미 부드러운 결과를 얻을 수 있습니다.

애니메이션 처리에 사용되는 코드는 다음과 같습니다.

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

도움이 되는 도구

이 정지 목록을 수동으로 만드는 것은 매우 번거롭습니다. 다행히 Jake와 Adam이 완화 곡선을 대응 항목으로 변환하는 데 도움이 되는 도구를 만들었습니다.linear()

이 도구는 JavaScript 완화 함수 또는 SVG 곡선을 입력으로 사용하고 linear()를 사용하여 단순화된 곡선을 출력합니다. 슬라이더를 사용하여 원하는 정지 수와 정밀도를 제어합니다.

오른쪽 상단에서 프리셋 중 하나를 선택할 수도 있습니다. 스프링, 바운스, 단순 탄성 또는 Material Design 강조 완화가 포함되어 있습니다.

DevTools 지원

DevTools에서 linear()의 결과를 시각화하고 수정하는 지원을 사용할 수 있습니다. 아이콘을 클릭하여 정지를 드래그할 수 있는 대화형 툴팁을 표시합니다.

이 DevTools 기능은 Chrome 114부터 DevTools에서 사용할 수 있습니다.