Framer motion : Motion Value에 대해서

Motion value는 애니메이션과 UI 변화를 효율적으로 처리하는 것을 도와준다. Motion value는 애니메이션의 현재 상태를 추적하고 업데이트하는데 사용된다. Motion value의 경우 React 렌더 사이클 외부에서 동작하기 때문에 컴포넌트가 다시 렌더링 되지 않아도 애니메이션을 시작하고 중지할 수 있다. 

 

useMotionValue

메서드	설명
get()	motion value의 현재 상태를 반환
set()	motion value를 새로운 값으로 설정
getVelocity()	motion value의 현재 속도를 반환
on(이벤트, 콜백함수)	motion value에 이벤트 리스너를 추가
stop()	현재 활성화된 애니메이션 중지
destroy()	motion value의 값이 변경될 때 호출되는 콜백 함수 등 리소스 정리 및 삭제
jump()	motion value를 새로운 값으로 설정한다. 이전 값과의 연속성을 끊고 리셋하여 현재 활성화된 애니메이션을 종료하고 즉시 새로운 값으로 이동

import { motion, useMotionValue } from "framer-motion";

export default function Comp01() {
    //x와 y 좌표의 동적인 값을 관리한다
    const x = useMotionValue(50);
    const y = useMotionValue(50);

    const method1 = () => {
        x.set(200);
        console.log(x.get());
    }

    const method2 = () => {
        y.set(200);
        console.log(y.get());
    }

    return (
        <>
            <motion.div
                // x,y를 사용해서 시작 위치가 x: 50, y:50 으로 style이 설정된다.
                style={{ x, y }}
                animate={{ x: 100, y: 100 }}
                transition={{ duration: 2 }}>
                Motion Value Example
            </motion.div>
            <button onClick={method1}>X 이동</button>
            <button onClick={method2}>Y 이동</button>
        </>
    )
}

 

 

위의 예제처럼 동적인 값 그 자체로 사용할 수 도 있지만, useMotionValue와 다른 값을 매핑시켜서 보다 더 효과적인 애니메이션 효과를 설정할 수 있다.

import { motion, useMotionValue, useTransform } from "framer-motion";

export default function Comp04() {
    // x 좌표의 동적인 값을 관리한다.
    const x = useMotionValue(0);

    // useTransform을 통해서 x의 값이 0에서 100 사이일 때, opacity를 1에서 0으로 매핑한다.
    const opacity = useTransform(x, [0, 100], [1,0]);

    const method1 = () => {
        x.set(50);
    }

    return (
        <>
            <motion.div
                style={{ x, opacity }}
                animate={{ x: 100 }}
                transition={{ duration: 2 }}>
                Motion Value Example
            </motion.div>
            <button onClick={method1}>이동</button>

        </>
    )
}

 

x의 좌표가 0일 때는 opacity가 1이고, 이후 x의 좌표가 변경되면서 opacity도 변경되는 것을 볼 수 있다. 

---

useMotionValueEvent 

useMotionValueEvent는 애니메이션이 진행되는 동안 특정 이벤트에 따라 로직을 실행할 수 있도록 해준다. 이 훅을 사용하면 애니메이션의 상태 변화에 따라 필요한 작업을 쉽게 처리할 수 있다. 

• useMotionValueEvent (MotionValue, 이벤트 타입, 함수);
  • change : MotionValue의 값이 변경될 때마다 호출
  • animationStart : 애니메이션이 시작될 때 발생 
  • animationComplete : 애니메이션이 완료될 때 발생
  • animationCancel : 애니메이션이 취소될 때 발생

import { motion, useMotionValue, useMotionValueEvent } from "framer-motion";
import { useState } from "react";

export default function Comp01() {
 // motionValue는 x값
    const x = useMotionValue(0);
    const [isAnimating, setIsAnimating] = useState(false);

    useMotionValueEvent(x, "animationStart", () => {
        console.log(`시작 시 x 값 : ${x.get()}`);
    })

    useMotionValueEvent(x,"change",(latest) => {
        console.log(`x 변경 : ${latest}`);
    })

    useMotionValueEvent(x, "animationCancel", () => {
        console.log("animation 취소됨");
        setIsAnimating(false);
    })

    useMotionValueEvent(x, "animationComplete", () => {
        console.log(`완료 시 x 값 : ${x.get()}`);
    })

    return (
        <div>
            <motion.div
                style={{ x, width: 100, height: 100, backgroundColor: "green" }}
                // isAnimating이 true면, x 위치를 100으로 false 일 경우 0으로 설정
                animate={{ x: isAnimating ? 100 : 0 }}
                transition={{ duration: 2 }}
            />
            <button onClick={()=>setIsAnimating(!isAnimating)}>
                {isAnimating? "Cancel Animation" : "Start Animation"}
            </button>
        </div>
    )
}

---

useMotionTemplate

동적인 스타일에 맞춰 애니메이션의 속성을 템플릿 문자열로 설정할 수 있다. 

• const 변수명 = useMotionTemplate`애니메이션 속성`;

import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
import { useState } from 'react'

export default function Comp01() {
    const x = useMotionValue(0)

    // 동적인 X값을 사용하여 backgroundColor 변경
    const backgroundColor = useMotionTemplate`rgb(255, 0, ${x})`;
    // 동적인 x값을 사용하여 width 변경
    const width = useMotionTemplate`${x}px`;
    const [isAnimating, setIsAnimation] = useState(false);
    function handleCheck() {
        setIsAnimation(!isAnimating)
    }
    return (
        <div
            style={{ padding: "50px", backgroundColor: "white" }} >
            <motion.div
                style={{ x, width, height: 100, backgroundColor }}
                animate={{ x: isAnimating ? 255 : 0 }}
                transition={{ duration: 2 }}
            />
            <button onClick={() => handleCheck()}>
                {isAnimating ? "Reset Animation" : "Start Animation"}
            </button>
        </div>
    )
}