Framer Motion #4 | Motion Values, Color Animating

Motion Value 정의

• 애니메이션 내의 수치를 트래킹할 때 필요한 것입니다.
• State 가 아니라 리렌더링을 발생시키지 않습니다.

Motion Value 의 초기 설정

function App() {
  const x = useMotionValue(0);
  useEffect(() => {
    x.onChange(() => console.log(x.get()));
  }, [x]);
  return (
    <Wrapper>
      <button onClick={() => x.set(200)}>click me</button>
      <Box style={{ x }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

useTransform

• Framer Motion 에서 Transformation 사용 할 수 있는 훅

function App() {
  const x = useMotionValue(0);
  const scale = useTransform(x, [-800, 0, 800], [0.1, 1, 2]);
  return (
    <Wrapper>
      <Box style={{ x, scale }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

Color Animating

• useMotionValue,useTransform, linear-gadient 사용

function App() {
  const x = useMotionValue(0);
  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);
  const gradient = useTransform(
    x,
    [-800, 800],
    [
      "linear-gradient(135deg, rgb(0, 210, 238), rgb(0, 83, 238))",
      "linear-gradient(135deg, rgb(0, 238, 154), rgb(238, 178, 0))",
    ]
  );
  return (
    <Wrapper style={{ background: gradient }}>
      <Box style={{ x, rotateZ }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더