Framer Motion

React를 위한 강력하고 사용하기 쉬운 모션 라이브러리.

## 장점? 1. 간단한 API와 다양한 기능을 통해 개발자의 생산성을 크게 향상시켜줄 수 있다. 2. 다양한 제스처와 애니메이션 변형을 지원하여 유연한 애니메이션 구현이 가능하다. 3. 오픈소스로 제공되어 누구나 자유롭게 사용할 수 있다.

설치방법

1. npm create vite@latest (파일명) 으로 react 앱을 만들어 준다.
2. npm install framer-motion --save 로 insrall

애니메이션 3가지 요소

1. initial : 애니메이션 시작 전 어떤 모습일지 (요소의 초기 상태를 설정한다_)
2. animate : 애니메이션이 끝날 때 어떤 모습일지 (요소의 애니메이션 상태를 설정한다_)
3. transition : 애니메이션이 어떻게 진행될지 ( 애니메이션의 전환 효과를 제어하는 데 사용한다_)

Motion Component

motion 컴포넌트는 Framer Motion 라이브러리의 핵심 요소로, HTML 및 SVG 요소를
애니메이션화할 수 있는 기능을 제공한다.

<motion.tag> </motion.tag>

Motion Component Transition 속성 종류

제목	설명	예제
duratin	애니메이션이 지속되는 시간을 설정한다. (단위: s)	transiton={{duration:2}}
delay	애니메이션이 시작되기 전에 지연되는 시간을 설정한다. (단위: s)	transition={{delay:2}}
ease	애니메이션의 이징 함수를 설정한다.(기본 값: easeInOut)	transition={{ease: "reaseIn"}}
type	애니메이션의 유형을 설정한다. (기본값 : "spring", 그 외 "tween","inertia" 등)	transition={{type:"spring",stiffness:100}}
stiffness	스프링 애니메이션의 강성을 설정한다. 값이 클수록 애니메이션이 더 빠르게 완료된다.	transition={{ type: "spring", stiffness: 200 }}
damping	스프링 애니메이션의 감쇠를 설정한다. 값이 클수록 애니메이션이 더 빨리 멈춘다	transition={{ type: "spring", damping: 10 }}
mass	스프링 애니메이션의 질량을 설정한다. 값이 클수록 애니메이션이 더 느리게 완료된다.	transition={{type:"spring", mess:1}}
repeat	애니메이션을 반복하는 횟수를 설정한다.무한 반복을 원할 경우 infinity를 사용할 수 있다.	transition={{repeat:Infinity}}
repratType	애니메이션 반복 유형을 설정한다. ("loop","reverse","mirror")	transition={{ repeat: 2, repeatType: "reverse" }}
repeatDelay	반복 애니메이션 사이의 지연 시간을 설정한다. (단위: s)	transition={{ repeat: 2, repeatDelay: 1 }

간단한 예제

import {motion} from 'framer-motion'
function Comp01(){
return(
    <motion.div
    style={{width:100,height:100,
    		backgroundColor:"blue",color:"white"}}
    initial={{opacity:0, x:0}}
    animate={{opacity:1, x:100}}
    transition={{duration:2,ease:"easeInOut"}}>
        Framer Motion
    </motion.div>
)
}

export default Comp01

애니메이션을 여러 단계로 나눠 순차적으로 실행할 수 있을까??

=> keyFrames!

keyframes를 사용하면 값의 배열을 설정하여 각 값을 순차적으로 애니메이션할 수 있다.
기본적으로 keyframe은 애니메이션 전체 시간 동안 균등하게 분배되지만, times 속성을 통해 정확한 타이밍과 페이징을 구성할 수 있다.

keyframe 예제

import {motion} from 'framer-motion'
function Comp01(){
return(
    <motion.div
    style={{width:100,height:100,backgroundColor:"blue",color:"white"}}
    animate={{opacity:[0.2, 0.5, 0.7, 0.8, 0], 
        x:[0, 100, 250, -250, 0],
        borderRadius:["0%","30%","50%","20%","0%"]}}
    transition={{duration:5,ease:"easeInOut",
        repeat:Infinity, repeatType:"loop",
        times:[0.2, 0.5, 0.7, 0.8, 1]
        //keyframe처럼 0%~100% 의미
    }}>
        Framer Motion
    </motion.div>
)
}

export default Comp01

Variants

Variants는 미리 정의된 애니메이션 상태의 집합.
각 상태는 특정 속성 값의 집합으로 구성된다.
Variants를 사용하면 동일한 애니메이션을 여러 컴포넌트에서 재사용할 수 있으며 가독성을 높일 수 있다.

Variants 예제

import {motion} from 'framer-motion'
function Comp1(){
    const variants={
        styles :(custom)=> ({
            width : 100,
            height : 100,
            backgroundColor : (custom),
            color:"white",
            margin : "10px"
        }),
        initial : {opacity:0,x:-100},
        animate : {opacity:1,x:100},
        
    }
return(
    <div>
        <motion.div
        style={variants.styles("blue")}
        initial="initial" animate="animate" transition={{duration:2}}
        variants={variants}>
            variants Example1
        </motion.div>
        <motion.div
        style={variants.styles("green")}
        initial="initial" animate="animate" transition={{duration:2}}
        variants={variants}>
            variants Example2
        </motion.div>
    </div>
)
}

export default Comp1