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

지점 간에 선형으로 보간하는 CSS의 이징 함수인 linear()를 도입하여 바운스 및 스프링 효과를 다시 만들 수 있습니다.

CSS의 이징

CSS에서 요소에 애니메이션을 적용하거나 전환할 때 animation-timing-functiontransition-timing-function 속성을 사용하여 이징 함수로 값이 변경되는 속도를 제어할 수 있습니다.

CSS에는 linear, ease, ease-in, ease-out, ease-in-out 등 여러 키워드를 사전 설정으로 사용할 수 있습니다. 자체 이징 곡선을 만들려면 cubic-bezier() 함수를 사용하거나 steps() 이징 함수를 사용하여 단계 기반 접근 방식을 취합니다.

이징을 적절하게 사용하면 모멘텀을 얻는 것처럼 애니메이션 요소에 무게감이 생깁니다.

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

linear() 소개

브라우저 지원

  • Chrome: 113 <ph type="x-smartling-placeholder">
  • Edge: 113. <ph type="x-smartling-placeholder">
  • Firefox: 112 <ph type="x-smartling-placeholder">
  • Safari 17.2. <ph type="x-smartling-placeholder">

CSS에서 이징을 정의하는 새로운 방법은 linear()를 사용하는 것입니다. 이 함수는 쉼표로 구분된 여러 정류장을 허용합니다. 각 정류장은 0에서 1 사이의 단일 숫자입니다. 각 정류장 사이에서 보간은 함수의 이름을 설명하는 선형 방식으로 실행됩니다.

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

이러한 정류장은 기본적으로 등거리로 확산됩니다. 앞의 스니펫에서는 0.25의 출력 값이 50% 지점에서 사용된다는 의미입니다.

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

linear(0, 0.25, 1)의 차트 시각화.

정류장이 등거리로 분산되지 않도록 하려면 선택적으로 정류장 길이를 전달할 수 있습니다. 한 값을 정류장 길이로 전달할 때 시작점을 정의합니다.

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

여기서 0.25의 출력 값은 50% 마크가 아니라 75%에 사용됩니다.

linear(0, 0.25 75%, 1)의 차트 시각화.

두 개의 값을 정류장 길이로 지정할 때는 출발지와 도착지를 모두 정의합니다.

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

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

선형 차트 시각화(0, 0.25 25% 75%, 1)

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() 곡선으로 변환하는 데 도움이 되는 도구를 만들었습니다.

<ph type="x-smartling-placeholder">
</ph> 선형 이징 생성기 도구의 스크린샷
실제 작동 중인 https://linear-easing-generator.netlify.app/의 스크린샷

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

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

DevTools 지원

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

<ph type="x-smartling-placeholder">
</ph> Chrome DevTools의 `linear()` 편집기 스크린샷
Chrome DevTools의 `linear()` 편집기 스크린샷

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

사진: Howie Mapson(Unsplash 제공)