프레이머 모션으로 React 앱에 애니메이션을 추가하는 방법

웹 애플리케이션 내에서 애니메이션을 통합하는 것은 필수적인 요소가 되었지만, 동시에 적절한 실행을 위해 세부 사항에 세심한 주의를 기울여야 하는 까다로운 요소로 자리 잡았습니다.

프레임러 모션은 널리 사용되는 자바스크립트 프레임워크인 React를 위해 특별히 설계된 애플리케이션 프로그래밍 인터페이스(API)로, 웹 애플리케이션 또는 소프트웨어 프로그램 내의 컴포넌트에 애니메이션을 추가하는 프로세스를 간소화해 줍니다.

프레임러 모션 작동 방식

프레임러 모션에서 모션 컴포넌트를 활용하려면 요소 사용을 통해 애니메이션 기능을 통합해야 합니다. 모든 HTML/SVG 요소에는 제스처 및 애니메이션 조작을 위한 속성을 갖춘 해당 모션 컴포넌트가 있습니다. 표준 HTML 분할은 다음과 같습니다:

 <div> </div>
 

프레임러 모션에 해당하는 부분을 시각적으로 표현하면 다음과 같습니다:

 <motion.div> </motion.div>
 

모션 컴포넌트를 활용하면 애니메이션 엔티티가 프로퍼티의 변동에 따라 애니메이션을 시작할 수 있습니다. 복잡한 애니메이션을 실행하려면 전용 레퍼런스와 함께 “useAnimate” 훅을 사용하는 것이 좋습니다.

프레임러 모션의 애니메이션

프로젝트에서 프레임러 모션을 활용하려면 시스템에 Node.js 런타임 환경과 Yarn 패키지 관리자가 설치되어 있어야 하며, React의 정의와 응용에 대한 이해가 있어야 합니다.

이 프로젝트의 소스 코드는 GitHub 리포지토리에서 확인 및 다운로드할 수 있습니다. 스타터 파일 브랜치를 시작 템플릿으로 사용하여 이 튜토리얼을 따라하거나 전체 데모를 보려면 최종 파일 브랜치를 사용하세요. 이 라이브 데모 를 통해서도 프로젝트가 실제로 작동하는 모습을 확인할 수 있습니다.

터미널을 열고 다음 코드 줄을 입력하여 명령을 실행합니다:

 git clone [email protected]:makeuseofcode/framer-motion-app.git
cd framer-motion-app
yarn
yarn dev
 

웹 브라우저를 통해 포트 5173에서 실행되는 로컬 웹 애플리케이션의 URI로 이동하면 다음과 같은 콘텐츠가 표시됩니다.

롤오버 시 확장되고 지정된 영역을 벗어나면 축소되는 버튼과 같은 애니메이션 시각 효과를 만드는 과정을 “스케치 기반 디자인”이라고 합니다. 크기 및 위치와 같은 디자인의 기본 원칙을 활용하면 Adobe After Effects에서 이러한 유형의 애니메이션을 쉽게 구현할 수 있습니다.

선호하는 코드 편집기를 사용하여 “src/App.jsx” 파일을 엽니다. 이 파일에서 React 조각을 렌더링하는 함수형 컴포넌트를 찾을 수 있습니다. 이 작업을 수행하려면 “Button” 컴포넌트를 임포트하고 렌더링 인자로 텍스트 프로퍼티를 전달해야 합니다.

 <section>
    <h4>Animated Button</h4>
    <div>Move your mouse over the button to see the effect</div>
    <Button text="Hover Me"/>
</section>
 

React 컴포넌트에서 Framer Motion을 사용해 애니메이션을 구현하려면 먼저 `framer-motion` 라이브러리에서 필요한 유틸리티 함수를 코드에 임포트해야 합니다. 이 경우 부모 컨테이너 내에서 애니메이션이 가능한 요소를 생성하는 데 사용되는 `motion.div` 함수를 가져와야 합니다. 이 작업은 `Button.jsx` 파일 상단에 다음 줄을 추가하여 수행할 수 있습니다: “`python import { motion } from “framer-motion”; “` 이렇게 하면 버튼 애니메이션에 특별히 관심이 있는 `motion` 모듈을 포함한 모든 하위 모듈뿐만 아니라 전체 `framer-motion` 라이브러리를 가져옵니다.

 import { motion } from "framer-motion"
 

표준 요소를 Motion.js [컴포넌트]로 대체합니다. 특히 이 예시에서는 motion.button 컴포넌트를 활용하세요.

이 글도 확인해 보세요:  React Native에서 Flexbox를 사용하는 방법

프로젝트의 UI를 개발하는 동안 버튼 중 하나에 호버 효과가 필요하다는 것을 알게 되었습니다. 이 효과를 구현하기 위해 프레임러 모션에서 제공하는 동안 호버 제스처 프롭을 활용했습니다. 이를 통해 사용자가 버튼 위에 마우스를 가져갈 때마다 애니메이션이 적용되는 프로퍼티 세트를 지정할 수 있었습니다. 애니메이션을 적용할 값으로 다양한 키-값 쌍이 포함된 객체를 전달하여 버튼의 모양과 동작을 매우 정밀하게 제어할 수 있었습니다.

 <motion.button whileHover={{ scale: 1.1 }}>

{text}

</motion.button> 

이 문맥에서 어떤 유형의 애니메이션을 가리키는지 명확히 설명해 주세요.

이 데모에서 CSS 애니메이션을 사용하지 않은 이유에 대해 의문을 가질 수 있는데, 이는 Framer Motion이 React 상태 관리와의 통합에서 CSS에 비해 이점을 제공하고 결과적으로 더 간결한 코드를 생성하기 때문입니다.

백드롭 애플리케이션 내에서 모달에 애니메이션을 적용하려면 먼저 React Motion에서 필요한 유틸리티를 가져올 수 있습니다. 그런 다음 `onClick` 소품과 자식 엘리먼트로 구성된 함수형 컴포넌트를 생성하여 지정된 클래스명(“backdrop”)을 가진 `motion.div` 엘리먼트와 자바스크립트 코드를 사용하여 구현된 `onClick` 이벤트 리스너를 반환할 수 있습니다.

 export default function Backdrop() {
    return (<>
        <motion.div>
        </motion.div>
    </>)
}
 

다음 코드 스니펫은 초기 상태를 나타내는 “initial” 프로퍼티, 애니메이션 중 목표 상태를 나타내는 “animate” 프로퍼티, 애니메이션이 완료된 후 최종 상태를 나타내는 “exit” 프로퍼티를 포함하여 React 컴포넌트에 대한 프로퍼티 집합을 정의합니다.

다음과 같이 코드 스니펫을 개선한 버전을 제안해도 될까요? “`php console.log(‘clicked’)} // ‘onClick’ 및 ‘children’ 프롭 추가 > {/* 내 콘텐츠 */} “` 이번 업데이트 버전에서는 클릭 시 콘솔에 메시지를 기록하는 콜백 함수가 있는 `onClick` 프로퍼티를 추가했습니다. 또한 `motion.div` 내의 모든 하위 요소에 대한 `children` 프로퍼티도 포함했습니다.마지막으로 CSS 타이밍 함수 ‘linear-ease-out’을 사용하여 전환 지속 시간을 ‘0.34’초로 지정했습니다.

 export default function Backdrop ({onClick, children}){
    return (<>
        <motion.div
            onClick={onClick}
            className="backdrop"
            initial={{ opacity: 0, backdropFilter:"blur(0px)" }}
            animate={{ opacity: 1, backdropFilter:"blur(3.4px)" }}
            exit={{ opacity: 0, backdropFilter:"blur(0px)"}}
            transition={{
                duration: 0.34,
            }}
        >
            {children}
        </motion.div>
    </>)
}
 

배경 컴포넌트는 모달 컴포넌트의 랩어라운드 역할을 합니다. 배경을 클릭하면 모달을 닫을 수 있습니다. 이 기능을 Modal.jsx에 통합하려면 모션과 배경 컴포넌트를 모두 임포트해야 합니다. 또한 기본 기능 컴포넌트는 closeModal과 텍스트의 두 가지 프로퍼티를 받아들여야 합니다. 마지막으로 백드롭 컴포넌트의 변형을 객체로 만듭니다.

     const variants = {
        initial: {
            y: "-200%",
            opacity: 1,
        },
        visible: {
            y: "50%",
            transition: {
                duration: 0.1,
                type: "spring",
                damping: 32,
                stiffness: 500
            }
        },
        exit: {
            y: "200%",
        }
    }
 

요청된 출력은 다음과 같습니다: “`css , 배경 컴포넌트 내에 포함되며, 미리 결정된 애니메이션을 나타내는 객체에 연결된 `variants` 속성을 가집니다. 이 구성을 통해 컴포넌트가 변형에 의해 정의된 다양한 애니메이션 형태로 존재할 수 있습니다.

 <Backdrop onClick={closeModal}>
    <motion.div
        onClick={(e) => e.stopPropagation()}
        className="modal"
        variants={variants}
        initial='initial'
        animate='visible'
        exit='exit'
    >
        {text}
    </motion.div>
</Backdrop>
 

사용자가 버튼을 클릭할 때 모달을 표시하는 기능을 통합하기 위해서는 모달 컴포넌트뿐만 아니라 사용 상태 React 훅을 가져와서 App.jsx 파일을 수정해야 합니다.

 import { useState } from "react";
import Modal from "./components/Modal";
 

“isModalOpen”이라는 변수를 생성하고 false로 초기화합니다. 이 변수가 모달의 열린 상태에 대한 기본값으로 사용됩니다.

 const [modalOpen, setModalOpen] = useState(false);
 

“modalOpen”의 값을 “false”로 설정하는 유틸리티 함수가 구현되었습니다. 이 함수를 “closeModal”이라고 합니다.

 function closeModal() {
    setModalOpen(false)
}
 

React 조각 위에 조건부로 적절한 텍스트 주석과 함께 모달 컴포넌트를 표시하고 closeModal 속성을 통해 이를 해제할 수 있는 기능이 추가되었습니다.

 {modalOpen && <Modal text="This is a modal animated with Framer Motion"}
 

컴포넌트의 후속 세그먼트에서는 버튼 요소를 사용하여 버튼이 생성되며, 이 버튼에는 클릭 시 modalOpen 값을 false로 설정하는 onMouseDown 이벤트 핸들러가 있습니다.

 <button onClick={() => setModalOpen(true)}>Show Modal</button>
 

React를 사용할 때 모달 컴포넌트가 종료 애니메이션이 표시되지 않고 DOM에서 제거될 수 있다는 사실을 알게 되었습니다. 이 문제는 Framer Motion의 라이브러리를 가져와서 사용할 수 있는 AnimatePresence 컴포넌트를 사용하여 해결할 수 있습니다.

 import {AnimatePresence} from 'framer-motion';
 

모달 컴포넌트를 AnimatePresence 컴포넌트 내에서 래핑하고 해당 프로퍼티를 “대기” 모드로 거짓으로 초기화하세요.

 <AnimatePresence initial={false} mode="wait">
    {modalOpen && <Modal text="This is a modal animated with Framer Motion" closeModal={closeModal} />}
</AnimatePresence> 

유틸리티 컴포넌트는 렌더링 전에 필요한 모든 데이터를 로드하고 처리하여 화면에서 플레이스홀더 콘텐츠가 깜빡이는 것을 방지합니다.

이 글도 확인해 보세요:  내부에서 REST API 호출을 수행하는 방법 VS 코드

Framer에서 스크롤 시 컴포넌트 애니메이션하기

제공된 코드 스니펫을 참조해 React에서 Framer Motion의 `whileInView` 프롭을 사용해 스크롤 시 컴포넌트를 애니메이션하는 예시를 확인하세요.이 기능을 구현하려면 `ScrollElement.jsx` 파일을 열고 프레임러 모션 라이브러리에서 필요한 유틸리티를 가져와야 합니다. 특히, `scroll-element`라는 클래스가 내장된 `motion.div` 컴포넌트를 임포트해야 합니다. 또한 애니메이션 요소의 모양과 동작을 사용자 정의하기 위해 필요에 따라 다른 클래스나 소품을 추가할 수 있습니다.

 <motion.div
    initial={{ opacity: 0, scale: 0, rotate: 14 }}
    whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
    transition={{ duration: .8 }}
    viewport={{ once: true }}
    className='scroll-element'
>
    Scroll Element
</motion.div>
 

주어진 텍스트로 무엇을 하길 원하는지 명확히 설명해 주세요.

 let scrollElementCount=14;
 

scrollElementCount 값에 의해 결정되는 지정된 길이의 배열을 활용하여 해당 배열의 각 개별 요소를 순회하고 루프 내의 인덱스 위치에서 키가 파생되는 각 반복에 대해 고유한 구성 요소를 생성합니다.

 {[...Array(scrollElementCount)].map((x, i) => <ScrollElement key={i} />)}
 

사용자가 수평 스크롤 메커니즘을 사용하여 웹 페이지를 탐색할 때 웹 페이지 내의 다양한 구성 요소가 화면의 가시 영역으로 부드럽고 매끄럽게 이동하여 최종 사용자에게 몰입감 있고 매력적인 경험을 제공하는 것이 필수적입니다. 이는 스크롤 과정에서 뷰포트에 표시되는 요소에 애니메이션 효과를 통합하여 달성할 수 있습니다.

프레임러 모션의 대안

프레임러 모션이 시중에 나와 있는 유일한 애니메이션 라이브러리는 아닙니다. Framer Motion의 작동 방식이 마음에 들지 않는다면 React Spring 과 같은 다른 라이브러리를 사용해 볼 수 있습니다.

CSS 애니메이션은 최신 브라우저에서 널리 지원되는 기능이지만, 복잡한 애니메이션을 마스터하려면 상당한 전문 지식과 노력이 필요합니다.

애니메이션을 통한 사용자 경험 개선

웹 기반 플랫폼을 사용할 때 사용자가 원활하고 자연스럽게 흐르는 상호 작용을 경험하는 것은 필수적입니다. 사이트나 애플리케이션에 애니메이션이 없으면 딱딱하고 반응이 없는 분위기가 조성되어 전반적인 사용자 경험에 해로울 수 있습니다. 반대로 애니메이션 요소를 통합하면 디자이너가 특정 작업을 완료할 때 사용자에게 피드백을 전달할 수 있으므로 플랫폼의 전반적인 사용성과 만족도를 높일 수 있습니다.

이 글도 확인해 보세요:  Vite로 React 앱을 설정하는 방법