Framer motion : useAnimationFrame에 대해서

useAnimationFrame은 매 애니메이션 프레임마다 호출되어, time과 delta를 인수로 받아 콜백을 매 프레임마다 시행한다. 보다 매끄러운 애니메이션 효과를 구현할 수 있다. 

• time : 콜백이 처음 호출된 이후의 총 시간 (밀리초)
• delta : 마지막 애니메이션 프레임 이후의 시간 (밀리초)

 

useAnimationFrame 사용하기

1. useRef를 사용하여 useAnimationFrame를 사용할 요소를 참조한다. 

import { useAnimationFrame } from "framer-motion";
import { useRef } from "react";

// useRef로 설정
export default function Comp11() {
    const ref = useRef(null);

    return (
        // useAnimationFrame을 사용할 요소에 ref 참조 생성
        <div
            ref={ref}
            style={{
                width: 100,
                height: 100,
                backgroundColor: "lightcoral",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "white",
                fontWeight: "bold"
            }}>
            Rotating Box
        </div>
    )
}

2. useAnimationFrame을 사용하여 콜백함수를 정의한다. 

    useAnimationFrame((time,delta) => {
        ref.current.style.transform = `rotateY(${time/10}deg)`;
        console.log(`time: ${time}`);
        console.log(`delta: ${delta}`);
    });

 

<<전체 코드>>

import { useAnimationFrame } from "framer-motion";
import { useRef } from "react";

// useRef로 설정
export default function Comp11() {
    const ref = useRef(null);
    useAnimationFrame((time,delta) => {
        ref.current.style.transform = `rotateY(${time/10}deg)`;
        console.log(`time: ${time}`);
        console.log(`delta: ${delta}`);
    });

    return (
        // useAnimationFrame을 사용할 요소에 ref 참조 생성
        <div
            ref={ref}
            style={{
                width: 100,
                height: 100,
                backgroundColor: "lightcoral",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "white",
                fontWeight: "bold"
            }}>
            Rotating Box
        </div>
    )
}