framer-motion : MotionValue 에 대해

TOC

1. motionValue

motionValue

motionValue란 무엇인가?

공식문서 framer를 슬슬 사용하다 보면
다른 사람의 코드에서 종종 보게되는 motionValue가 등장한다.

이게 이해가 되질 않으면 더욱 화려한 UI/UX는 다사다난해질 것이 자명하다.

motionValue를 이해하기까지 시간이 좀 걸렸는데 이해한대로 풀어보겠다.

1. motionValue는 원래 motion component를 생성하면 component내부에 자동적으로 생성된다.

• 이게 무슨 말인가

하나의 컴포넌트가 생성되면 react자체인지 framer-motion에 의해서인지 컴포넌트 하나당 하나의 motionValue가 생성된다.

이 motionValue가 하는 일은 motion의 value 즉 움직임에 대한 database이다.

사각형을 하나 만들고 x 방향으로 100px 움직였다면 이에 대한 속력을 기록하고 scale등을 변경하는 것도 모두 저장된다.

기본적으로 이러한 저장소라고 보면 된다.

2. motionValue를 사용해 reflect하기

예제를 만들었지만 fontError가 발생하는데 일단 중요해보이진 않으므로 예제를 분석해봅시다.

export const MyComponent = () => {
  const scale = useMotionValue(1)
// const scale=1
  return <motion.div style={{ scale }} />
}

import "./styles.css";
import React from "react";
import { Framer, useMotionValue, useTransform, useAnimation } from "framer";
import { motion } from "framer-motion";
import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  z-index: 1;
`;
export default function App() {
  // const scaleLeft = useMotionValue(1);
  const motionValue = useMotionValue(0);
  return (
    <Wrapper>
      <motion.div
        style={{ translateX: motionValue }}
        animate={{
          scale: [1, 0.5, 2],
          translateX: 20,
          transition: {
            times: [0, 0.5, 1],
            yoyo: Infinity
          }
        }}
      >
        👊
      </motion.div>
      <motion.div style={{ translateX: motionValue }}>😝</motion.div>
      <motion.div style={{ scaleX: -1, translateX: motionValue }}>
        👊
      </motion.div>
    </Wrapper>
  );
}

우선 useMotionValue훅을 사용해줍니다.

useMotionValue는 translateX의 값을 비추게 됩니다.

 style={{ translateX: motionValue }}
        animate={{
          scale: [1, 0.5, 2],
          translateX: 20,
          transition: {
            times: [0, 0.5, 1],
            yoyo: Infinity
          }
        }}

위의 첫번째 주먹이 담긴 motion.div는 motion을 적용해 움직이는 상태입니다.

하지만 아래의 얼굴과 다른 주먹은 motion을 주지 않아 움직이지 못하죠
이제 motionValue로 비추고 있는 translateX의 값을 활용해 다른 motion.div에도 값을
넘겨줍시다.

 <motion.div style={{ translateX: motionValue }}>😝</motion.div>
      <motion.div style={{ scaleX: -1, translateX: motionValue }}>

네 이러면 모두들 움직이게 됩니다.

여기에서 발생하는 이점은
1. motionValue가 변수처럼 작용한다.

2.기존 값에 변화를 줄 수 있게 된다.

3.다른 훅과 함께 사용할 수 있게 된다.

우선 사용법과 원리를 알았으니 포스팅을 마칩니다.