Tailwind 및 CSS를 사용하여 애니메이션용 React 유틸리티 구성 요소를 만들었습니다: AnimateIn

나는 화면에 요소를 애니메이션화하기 위해 한동안 내 프로젝트에서 동일한 애니메이션 패턴을 사용해 왔습니다. 가장 간단한 형태에서는 요소의 불투명도가 0인 스타일을 지정한 다음 CSS 전환이 1초인 불투명도가 1이 되도록 스타일을 변경합니다.

전환하는 다른 속성을 추가하거나, 기간을 변경하거나, 지연을 추가하거나, 맞춤 이징을 설정하여 이를 기반으로 구축할 수 있습니다.

<AnimateIn/>은 프로젝트에 애니메이션 효과를 빠르게 추가하고 싶을 때마다 사용하도록 만든 재사용 가능한 React 구성 요소입니다. 간단한 유틸리티 구성 요소인 이 구성 요소는 CSS 애니메이션과 Tailwind 클래스를 결합하여 최소한의 노력으로 유연하고 눈길을 끄는 애니메이션을 만듭니다.

어떻게 사용되는지 살펴보겠습니다. 구성요소를 가져온 후 Tailwind 클래스를 사용하여 from 와 to 를 정의합니다. <AnimateIn/> 내에서 대상 요소를 래핑하여 애니메이션이 생생하게 나타나는지 확인하세요.

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

다음은 더 많은 속성을 사용하여 제목과 부제에 애니메이션을 적용하는 좀 더 복잡한 예입니다.

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

헤드라인 예에서 <AnimateIn/>은 페이드인과 결합된 슬라이딩 효과를 생성하는 데 사용됩니다. 각 속성이 애니메이션에 기여하는 방식은 다음과 같습니다.

• as 속성: as="h1" 설정하면 AnimateIn에 애니메이션을 <h1> 요소로 렌더링하도록 지시합니다.

• from 및 to 속성: from 속성은 헤드라인을 화면 밖에서 시작하고( translate-y-32 , 32단위 아래로 이동) 보이지 않게( opacity-0 ) 시작합니다. 그런 다음 to 속성은 헤드라인을 최종 위치로 가져오고(다시 translate-y-0 ) 완전히 표시되도록 만듭니다( opacity-100 ).

• duration 속성: 애니메이션이 지연 없이 즉시 시작되도록 설정되고 빠른 300ms 동안 실행됩니다.

• className 속성: className="text-4xl" Tailwind의 유틸리티 클래스를 적용하여 글꼴 크기를 설정하여 헤드라인을 눈에 띄게 만듭니다.

• style 속성: 사용자 정의 transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) )은 애니메이션에 고유한 용이성을 추가하여 바운스 같은 효과를 제공합니다.

자막은 다양한 애니메이션 세트를 사용하여 헤드라인을 보완하여 응집력 있는 시각적 흐름을 만듭니다.

• as 속성: 여기서 as="h2" 구성 요소를 자막에 적합한 <h2> 요소로 렌더링합니다.

• from 및 to 속성: 자막은 0( scale-0 )으로 축소되고 보이지 않게( opacity-0 ) 시작된 다음 원래 크기( scale-100 )로 확대되어 완전히 표시됩니다( opacity-100 ). 페이드인과 함께 사용되는 이 크기 조절 효과는 애니메이션에 깊이를 더해줍니다.

• delay 및 duration 속성: 자막도 800ms 지연 후에 시작되므로 헤드라인이 완전히 애니메이션된 후에 시작됩니다. 이러한 시차적 접근 방식은 각 요소가 초점을 맞추는 순간을 보장합니다.

• className 속성: className="text-lg" 자막의 글꼴 크기를 설정하여 제목보다 작지만 여전히 중요합니다.

무슨 일이 일어나고 있는지 더 잘 이해하기 위해 Github의 <AnimateIn/> 소스 코드를 살펴보겠습니다.

<AnimateIn/>은 useState 후크를 사용하여 from 속성으로 애니메이션 상태를 초기화합니다. 이 속성은 하나 이상의 Tailwind 유틸리티 클래스여야 하며 애니메이션이 발생하기 전에 애니메이션 시작점에 대한 단계를 설정합니다.

구성 요소의 첫 번째 useEffect 후크는 모션 감소에 대한 사용자 기본 설정을 존중하기 위한 것입니다. (prefers-reduced-motion: reduce) 미디어 쿼리를 수신함으로써 애니메이션 동작은 사용자의 시스템 설정을 기반으로 합니다. 모션 감소를 선호하는 경우 애니메이션을 완전히 건너뛰고 애니메이션 상태를 to 속성으로 직접 설정하여 접근 가능한 환경을 제공합니다.

두 번째 useEffect 후크는 애니메이션 로직이 있는 곳입니다. 사용자가 모션 감소에 대한 기본 설정을 표시하지 않은 경우 구성 요소는 지정된 지연 후 애니메이션 상태를 초기 값 from 최종 to 변경하는 타이머를 설정합니다. 이 전환은 애니메이션의 시각적 효과를 만듭니다.

이 후크의 정리 기능(return 문)은 타이머를 지워 애니메이션이 완료되기 전에 구성 요소가 마운트 해제되는 경우와 같은 잠재적인 메모리 누수를 방지합니다.

React.createElement 함수 호출은 구성 요소의 렌더링 메커니즘입니다. as prop을 기반으로 HTML 요소를 동적으로 생성하여 다양한 HTML 요소에서 구성 요소를 사용할 수 있습니다. className tailwind의 유틸리티 클래스, prop으로 전달된 사용자 정의 className 및 현재 애니메이션 상태를 결합하는 shadcn에 의해 대중화된 cn 함수를 사용하여 생성됩니다. 이 동적 클래스 할당은 원하는 스타일과 전환을 요소에 적용하는 것입니다.

또한 애니메이션 컨테이너에 스타일 속성을 직접 설정하기 위해 전달할 수 있는 style 속성이 있습니다. transitionDuration duration 소품을 기반으로 설정되지만 사용자가 모션 감소를 선호하는 경우 지능적으로 0ms 로 전환하여 구성 요소의 기능을 유지하면서 애니메이션을 효과적으로 비활성화합니다.

자신의 프로젝트에서 <AnimateIn/>을 사용하고 싶고 이미 shadcn을 사용하고 있다면 필요한 모든 것이 이미 있는 것입니다. AnimateIn.tsx를 다운로드하여 구성 요소에 추가하기만 하면 됩니다.

그렇지 않은 경우 Tailwind 클래스를 병합하는 데 유용한 유틸리티인 Tailwind 와 mxcn 을 설치하는 것이 좋습니다.

shadcn과 마찬가지로 <AnimateIn/>은 앱에 복사하여 붙여넣고 필요에 따라 사용자 정의할 수 있는 재사용 가능한 구성 요소입니다. 코드는 귀하의 것입니다.

또한 animate-in.vercel.app 에서 <AnimateIn/>을 사용하여 다양한 애니메이션을 만들어 볼 수 있는 멋진 데모 페이지를 정리했습니다.

여기에도 게시됨