Netfilx Clone #4 Framer Motion(4)

Framer Motion

✔️layout animation

• true인 경우 이 컴포넌트는 레이아웃이 변경될 때 새 위치에 자동으로 애니메이션을 적용한다.
• 사용 방법

<motion.div layout />

• 예시 1)

function App() {
  const [ clicked , setClicked ] = useState(false);
  const toggleClicked = () => setClick( prev => !prev);
  return (
      <Wrapper onClick={toggleClicked}>
        <Box style={{ justifyContent: clicked ? "center" : "flex-start" ... }}>
          <Circle />
        </Box>
      </Wrapper>
  )
}

• 기본 상태(클릭 전)
  
• 클릭 후
  
• clicked 가 false 라면 좌측 상단에, true 라면(클릭했다면) 중앙에 오게 바꿨다.
• 그러나 별도로 애니메이션을 준것이 아니므로 그냥 왔다 갔다 뚝딱 뚝딱만 한다.
• 여기서 위치가바뀌는 element 에 layout prop 을 사용하게되면!!??

 return (
      <Wrapper onClick={toggleClicked}>
        <Box style={{ justifyContent: clicked ? "center" : "flex-start" ... }}>
          <Circle layout/> 
        </Box>
      </Wrapper>
  )

• 공이 좌측 상단<->중앙으로 이동할때, 그러니까
  flex-start 에서 center 까지 움직이는 동선이 뚝딱뚝딱 움직이는게 아니라
  이어지듯 부드럽게 애니메이션이 적용된다!!!!! 별도 css 없어도됨ㅋㅋ ㄱㄴㅇㅅ ~

✔️layoutId (Syncing layout animations)

• 모션 컴포넌트의 layout prop은 레이아웃이 변할 때마다, 자동으로 애니메이션을 적용한다.
• 각기 다른 컴포넌트를 framer 에게 같은 컴포넌트라고 설명해주어야 할때 사용하면된다.
• 예시 1)

function App() {
  const [ clicked , setClicked ] = useState(false);
  const toggleClicked = () => setClick( prev => !prev);
  const 
  return (
      <Wrapper onClick={toggleClicked}>
        <Box>
          {!clicked ? <Circle/> : null}
        </Box>
        <Box>
          {clicked ? <Circle/> : null}
        </Box>
      </Wrapper>
  )
}

• 기본 상태 (클릭 전)
  
• 클릭 여부에 따라 왼쪽 박스의 원이 보인다면 오른쪽 박스의 원을 숨기고, 클릭하면 반대로 되는 기능이다.
• 아래처럼 클릭할때마다 왼쪽이 깜빡거리거나 오른쪽이 깜빡거리거나 둘중 하나임
  
• 여기서, Framer 에게 두 개의 <Circle/> 은 같은 것이라고 말한다면? 연결되야 한다고 말한다면?

  return (
      <Wrapper onClick={toggleClicked}>
        <Box>
          {!clicked ? <Circle layoutId="hi"/> : null}
        </Box>
        <Box>
          {clicked ? <Circle layoutId="hi"/> : null}
        </Box>
      </Wrapper>
  )

• <Circle layoutId="hi"/> 같은 layout ID 를 부여하면, framer 는 circle 컴포넌트가 하나라고 생각한다.
• 따라 왼쪽이 보이면 오른쪽이 숨는 애니메이션이 아닌
  
• 하나의 circle 컴포넌트가 클릭 여부에 따라 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 이동하는 애니메이션이 적용된다!!!!
• 그리고 위는 ㅋㅋ 움직이는 중 캡처..

여기까지가 8강 복습이였다!
framer motion 은 .. 뷔페같다 :) ㅋㅋㅋㅋ
그럼 9강에서 다시봅시다아