[react] react Framer-motion 리액트 프레이머 활용하기 (애니메이션을 간편하게!)

 

 

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

react Framer-motion 리액트 프레이머 모션 활용하기

 

 

 

React Framer Motion은 주로 다음과 같은 역할을 합니다:

애니메이션 제어: 사용자가 정의한 컴포넌트나 DOM 요소를 애니메이션화할 수 있습니다. 움직임, 크기 조절, 회전 등 다양한 애니메이션 효과를 구현할 수 있습니다.

제스처 처리: 터치, 클릭 등의 제스처 이벤트를 감지하고 이에 따른 애니메이션을 쉽게 추가할 수 있습니다.

컴포넌트 간 통신: 다양한 컴포넌트 간의 통신을 촉진하며, 애니메이션을 통한 사용자 경험 향상에 기여합니다.

 

 

 

 

 

 

react Framer-motion 리액트 프레이머 모션 구현 예시

 

 

구현 예시 화면입니다.

 

밑줄 효과, 마우스 hover 시 box가 커지는 효과, 버튼이 나타나는 효과를 사용했습니다.

 

 

 

 

 

react Framer-motion 리액트 프레이머 모션 활용 방법

 

 

1. 공식 사이트

 

다양한 효과와 사이트는 아래 사이트 참고 바랍니다.

 

https://www.framer.com/motion/

Documentation | Framer for Developers

 

 

 

1. 제스처 이벤트와 트랜지션: whileHover, whileTap 등의 제스처 관련 이벤트를 통해 사용자 상호 작용에 반응하며 부드러운 트랜지션을 제공합니다.

 

2. 프레임-별 애니메이션: animate 속성을 통해 특정 프레임에서의 속성을 지정하고, 부드럽게 전환할 수 있습니다.

 

 

 

2. 설치

 

아래 명령어를 입력하면 설치할 수 있습니다.

npm install framer-motion

 

 

 

3. 사용 방법

 

motion을 임포트하고 motion.div를 작성하여 사용할 수 있습니다.

 

import { motion } from 'framer-motion'

<motion.div animate={{ scale: 0.7 }} />

 

 

 

4. 작성 코드

 

예시 화면에 대한 작성 코드입니다.

 

 

 

import style from './Main.module.css';
import { motion } from "framer-motion";
import { Link } from 'react-router-dom';
import { useState } from 'react';

function Main() {
    // 버튼 이미지의 애니메이션 상태를 제어하기 위한 state
    const [isHovered, setIsHovered] = useState(false);

    // 버튼 박스의 애니메이션 상태를 정의합니다.
    const buttonBoxVariants = {
        hover: { scale: 1.1 },
        tap: { scale: 0.9 }
    };

    // 버튼 이미지의 애니메이션 상태를 정의합니다.
    const buttonIconVariants = {
        hidden: { x: -30, opacity: 0 }, // 왼쪽에 숨겨진 상태
        visible: { x: 0, opacity: 1 } // 원래 위치에 나타난 상태
    };

    return (
        <div className={style.mainpage}>
            <div className={style.main}>
                <div className={style.main_text}>
                    <h1 className={style.main_text1}><span className={style.highlight1}>맛</span>집,</h1>
                    <h1 className={style.main_text2}><span className={style.highlight2}>등산</span>로,</h1>
                    <h1 className={style.main_text2}><span className={style.highlight1}>산악기상정보</span>를</h1>
                    <h1 className={style.main_text3}>
                        <span>한 번의 검색으로 확인하세요.</span>
                        <motion.span
                            className={style.underline}
                            initial={{ width: 0 }}
                            animate={{ width: "100%" }}
                            transition={{
                                repeat: Infinity,
                                repeatType: "reverse",
                                duration: 3
                            }}
                        />
                    </h1>
                </div>
                <div className={style.main_box}>
                    <Link className={style.main_map} to="/map">
                        <motion.div
                            className={style.box}
                            variants={buttonBoxVariants}
                            whileHover="hover"
                            whileTap="tap"
                            onHoverStart={() => setIsHovered(true)}
                            onHoverEnd={() => setIsHovered(false)}
                        >
                            <div className={style.main_mapimg}>
                                <img src={`${process.env.PUBLIC_URL}/img/mapimg.png`} alt="mapimg" className={style.mapimg} />
                            </div>
                            {/* 텍스트 부분 */}
                            <div className={style.box_text1}>
                                등산 정보 검색하러 가기
                            </div>
                            {/* 이미지 부분 */}
                            <motion.img
                                src={`${process.env.PUBLIC_URL}/img/button.svg`}
                                alt="버튼"
                                className={style.buttonIcon}
                                variants={buttonIconVariants}
                                initial="hidden"
                                animate={isHovered ? "visible" : "hidden"}
                                transition={{ duration: 0.3 }}
                            />
                        </motion.div>
                    </Link>
                </div>
            </div>
        </div>
    );
}

export default Main;

 

 

 

 

 

 

위와 같은 방식으로 react에서 framer-motion을 사용하여 애니메이션을 효과적으로 구현할 수 있습니다.