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()를 사용하여 복잡한 곡선 만들기

위의 예는 매우 간단한 이징이지만 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
);

유용한 도구

이 정류장 목록을 수동으로 만드는 것은 매우 번거로울 수 있습니다. 다행히 제이크와 아담은 이징 곡선을 linear() 곡선으로 변환하는 데 도움이 되는 도구를 만들었습니다.

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

오른쪽 상단에서 미리 설정 중 하나를 선택할 수도 있습니다. 스프링, 바운스, 단순 탄성 또는 머티리얼 디자인 강조 이징이 포함됩니다.

DevTools 지원

DevTools에서는 linear()의 결과를 시각화하고 수정할 수 있습니다. 아이콘을 클릭하면 정류장 주변을 드래그할 수 있는 대화형 도움말이 표시됩니다.

이 DevTools 기능은 Chrome 114에서 제공되는 DevTools에서 사용할 수 있습니다.

사진: Howie Mapson(Unsplash 제공)