8.3 Variants part One

아래 두 코드는 동일하게 동작한다.

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: "spring", delay: 0.5 }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotateZ: 360 }}
      />
    </Wrapper>
  );
}

const myVars = {
  start: { scale : 0},
  end : { scale: 1, rotateZ: 360, transitio: {type: "spring", delay: 0.5} }
}

function App() {
  return (
    <Wrapper>
      <Box variants={myVars} initial="start" animate="end"
      />
    </Wrapper>
  );
}

---

8.7 MotionValue

Box가 움직일때마다 x를 통해 감지되고, x는 useMotionValue를 통해 x의 좌표를 감지할 수 있고, x.get()을 통해 콘솔에 직접 찍어 좌표의 변화를 숫자로 볼 수 있다.

motionValue : state가 아니고, rerendering을 하지 않는다.

function App() {
  const x = useMotionValue(0);
  useEffect(() => {
    x.onChange(() => console.log(x.get()));
  }, [x]);

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

---

8.8 useTransform

일단 값을 하나 받고 (x), 그 값의 어떤 제한값이랑 원하는 출력값을 받는다.

function App() {
  // x : 드래그 할때마다 새로 설정되는 값값
  const x = useMotionValue(0);
  const potato = useTransform(x, [-800, 0, 800], [2, 1, 0.1]);
  useEffect(() => {
    //x.onChange(() => console.log(x.get()));
    potato.onChange(() => console.log(potato.get()));
  }, [x]);

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

export default App;