✍8.10 SVG Animation

📎https://fontawesome.com/

✅fill="currentColor" 일 때 path는 svg의 color를 쓰게 된다.

✅pathLength는 현재 우리 위치까지의 path의 길이

마지막으로 특정 property의 animation duration을 단독으로 변경하는 방법을 알아보자.
pathLength가 0에서 1로 가는것, fill의 opacity가 0에서 1로 가는 것 모두 5초가 걸린다.

const svg = {
  start: { pathLength: 0, fill: "rgba(255,255,255,0)" },
  end: {
    pathLength: 1,
    fill: "rgba(255,255,255,1)",
    transition: { duration: 5 },
  },
};

위 코드와 같이 transition: {duration:5} 로 작성했기 때문에 똑같이 5초가 걸리게 되는것인데, 이를 수정해보자.

 <motion.path transition={{
            default: { duration: 5 },
            fill: { duration: 2, delay: 5 }, }} />

직접적으로 어떤 property를 어떻게, 얼마나 animation 할 지 특정할 수 있는 것이다. default는 모든 propery에 적용되는 값이라고 생각하면 된다🤣

✍8.11 AnimatePresence

AnimatePresence는 React js App에서 사라지는 component를 animate하는 component 이다.
AnimatePresence는 visible 상태여야 하고, 내부에는 condition(조건문)이 있어야한다는 것이다.

✍8.12 Slider part One

나타나는 Box와 사라지는 Box를 특정해서 슬라이더를 만들어 보자.

간단하게 prev와 next 버튼을 만들었는데, prev를 누르면 잘 작동하긴 하지만 next를 눌렀을 때랑 같은 방향에서 나타나는 문제점이 있는데 다음 챕터에서 배워보자.

✍8.13 Slider part Two

✅ 배열을 없애고 더 깔끔하게 코드를 작성해보자. element의 key를 바꿔주는 것 만으로도 React js는 element가 사라졌다고 생각해서 ewit animation을 실행할 것이다.

✅ prev 버튼을 눌렀을 때 반대방향으로 갈수있도록 해볼건데, custom이란 property에 대해서 알아보자.
custom은 variants에 데이터를 보낼 수 있게 해주는 property이다.

✅ next를 누르면 1번 Box의 exit animation이 실행되는 동안 2번 Box의 entry가 거의 동시에 실행된다. 하나가 실행된 뒤에 다음 것이 실행되는것이 아니라 animation이 거의 함께 시작한다는 것.
exitBeforeEnter을 이용하여 변경해줄 수 있다. exit을 실행시키고 exit이 끝나면 다음 element를 올 수 있도록 해준다. 따라서 1번 Box의 exit이 완전하게 실행됐을 때만 2번 Box가 오게 된다!

❗ exitBeforeEnter는 더 이상 지원하지 않으므로 mode="wait"를 작성해서 구현하면 된다.

✍8.14 You Need to Watch This

layout이라는 prop을 배워보자. 이 prop을 element에게 주면 그 element의 layout이 바뀔 때 알아서 animate가 된다. css의 변화가 자동으로 animate 된다는 것!
원하는 컴포넌트에 layout만 작성해주면 정말 간단하게 구현 가능🤣

const Box = styled(motion.div)`
  width: 400px;
  height: 400px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40px;
  display: flex;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

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

두번째로 shared layout animation을 배워보자.
두개 각각의 서로 다른 component인 Circle이 같은 component라고 Framer에게 함께 연결된다고 말해주면 되는데, layoutId를 활용하면 쉽게 구현이 가능하다🤣

✍8.15 Final Project part One

8.14에 이어 layoutId를 이용하여 다른 component이지만 함께 묶고 각각 다른 state를 animate 해보자.

✍8.16 Final Project part Two

다른 Box도 클릭할 수 있게 하고, 클릭한 각 Box를 중앙으로 가게 해보자. (어느 element를 클릭해도 작동되도록)