Daily Two Cents - 미묘한

오늘은 또 다른 단순한 날이 될 것입니다. 제가 추가한 미묘한 애니메이션 중 하나를 어떻게 추가했는지 설명하겠습니다.

내 프로젝트의 각 "블록"은 사용자를 프로젝트 저장소로 보내는 링크입니다. 링크 위로 마우스를 가져가면 이미지가 약간 확대됩니다. 동영상 없이는 구분하기 어렵지만, 아래에 hovered 상태와 unhovered 상태를 보여드리겠습니다.



링크의 가리키지 않은 상태입니다.



그리고 이것은 호버 상태입니다.

이 미묘한 애니메이션을 추가하기 위해 반응 스프링을 사용했으며 코드에 대해 조금 이야기하겠습니다. 각 프로젝트 페이지를 만드는 데 구성 요소를 사용했기 때문에 약간의 창의력을 발휘해야 했습니다.

const [{ size0, size1, size2, size3 }, set] = useSpring(() => ({
    size0: "110",
    size1: "100",
    size2: "100",
    size3: "100",
  }))

이것은 각 이미지에 대한 설정입니다. 4개의 이미지가 있으므로 4개의 크기 변수가 있습니다. 첫 번째 변수는 특정 이미지가 div에 맞지 않아 조금 더 크게 만들어야 했기 때문에 첫 번째 변수는 110이라고 언급하겠습니다.

onMouseEnter={
                    index === 0
                      ? () => set({ size0: "120" })
                      : index === 1
                      ? () => set({ size1: "110" })
                      : index === 2
                      ? () => set({ size2: "110" })
                      : () => set({ size3: "110" })
                  }
                  onMouseLeave={
                    index === 0
                      ? () => set({ size0: "110" })
                      : index === 1
                      ? () => set({ size1: "100" })
                      : index === 2
                      ? () => set({ size2: "100" })
                      : () => set({ size3: "100" })
                  }

이렇게 하면 각 사진 위로 마우스를 가져가면 크기를 변경할 수 있고 원래 값으로 되돌릴 수도 있습니다. 삼항 문을 사용하지 않는 것이 좋지만 1개 이미지 위로 마우스를 가져가면 4개 이미지가 모두 확대되는 구성 요소이기 때문에 이 대체 솔루션을 생각해 내야 했습니다. .)

글쎄, 그것은 오늘 나에게서 모든 것이 될 것입니다. 읽어 주셔서 감사합니다!