React - Animation(MotionValues)

MotionValue

MotionValue는 애니메이션 내의 수치를 트래킹할 때 필요하다.
MotionValue는 업데이트 될 때 React Rendering Cycle을 발동시키지 않는다. 즉, state가 아니라는 것이다.
그렇기때문에 MotionValue가 바뀌더라도 컴포넌트는 다시 렌더링되지 않는다.

function App() {
  const x = useMotionValue(0);
  useEffect(() => {
    const logging = (data: number) => {
      console.log(data);
    };
    const trackX = x.on("change", logging);

    return () => {
      trackX();
    };
  }, [x]);
  return (
    <Wrapper>![](https://velog.velcdn.com/images/stackin/post/34751642-7dba-475a-993e-7ed40992e214/image.gif)

      <Box style={{ x }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

export default App;

useTransform()

useTransForm은 한 값을 받고 그 값의 제한값과 출력값을 줄 수 있다.
첫번째 인자에는 변경하고싶은 변수, 두번째는 그 변수의 제한값, 세번째는 출력값을 넣어준다.

function App() {
  const x = useMotionValue(0);
  const scale = useTransform(x, [-800, 0, 800], [2, 1, 0.1]);
  useMotionValueEvent(scale, "change", (el) => console.log(el));

  return (
    <Wrapper>
      <Box style={{ x, scale }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

x의 값의 변화에 따라서 scale을 달리해줄 수 있다.

const Wrapper = styled(motion.div)`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

function App() {
  const x = useMotionValue(0);
  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);
  const gradient = useTransform(
    x,
    [-800, 0, 800],
    [
      "linear-gradient(135deg, rgb(200, 252, 200), rgb(27, 88, 219))",
      "linear-gradient(135deg, rgb(163, 204, 162), rgb(124, 240, 149))",
      "linear-gradient(135deg, rgb(241, 240, 146), rgb(236, 65, 65))",
    ]
  );
  useMotionValueEvent(rotateZ, "change", (el) => console.log(el));
  return (
    <Wrapper style={{ background: gradient }}>
      <Box style={{ x, rotateZ }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

const Wrapper = styled(motion.div)`
  height: 200vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

function App() {
  const x = useMotionValue(0);
  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);
  // useMotionValueEvent(rotateZ, "change", (el) => console.log(el));
  const gradient = useTransform(
    x,
    [-800, 0, 800],
    [
      "linear-gradient(135deg, rgb(200, 252, 200), rgb(27, 88, 219))",
      "linear-gradient(135deg, rgb(163, 204, 162), rgb(124, 240, 149))",
      "linear-gradient(135deg, rgb(241, 240, 146), rgb(236, 65, 65))",
    ]
  );
  const { scrollYProgress } = useScroll();
  // useMotionValueEvent(scrollYProgress, "change", (el) => console.log(el));
  const scale = useTransform(scrollYProgress, [0, 1], [1, 5]);
  return (
    <Wrapper style={{ background: gradient }}>
      <Box style={{ x, scale, rotateZ }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

export default App;