Animation 라이브러리 - Framer Motion (2. 기초 사용)

UI 라이브러리처럼 예제를 통해 적용된 컴포넌트를 통해 예제로 살펴보고 싶지만...
시각적 효과에 대한 설명의 어려움과, 코드 예제의 복잡성 등의 진행과정의 어려움이 있기에 간단하게만 살펴보겠다.

Ping Pong Animation

// 공통 적용된 스타일
const style = {
    height: 150,
    width: 150,
    background: 'skyblue',
};	

return (
	<div>
    	<motion.div     
            style={style}
            initial={{ scale: 0 }}
            animate={{ rotate: 360, scale: 1 }}
            transition={{
            type: "spring",
              stiffness: 260,
                damping: 20,
            }}               
        />
    </div>
);

Fade Animation

<motion.div
  style={style}
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.5 }}
/>

Keyframes

<motion.div
  style={style}
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  }}
/>

Darg Animation

<motion.div
    style={style}
    drag
    dragConstraints={{
      top: -50,
      left: -50,
      right: 50,
      bottom: 50,
    }}
/>

Hover Animation

<motion.button
    style={{
      ...style,
        border: 'none'
    }}
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
/>