Framer Motion15 Framer motion : Motion Value에 대해서 Motion value는 애니메이션과 UI 변화를 효율적으로 처리하는 것을 도와준다. Motion value는 애니메이션의 현재 상태를 추적하고 업데이트하는데 사용된다. Motion value의 경우 React 렌더 사이클 외부에서 동작하기 때문에 컴포넌트가 다시 렌더링 되지 않아도 애니메이션을 시작하고 중지할 수 있다. useMotionValue메서드설명get()motion value의 현재 상태를 반환set()motion value를 새로운 값으로 설정getVelocity()motion value의 현재 속도를 반환on(이벤트, 콜백함수)motion value에 이벤트 리스너를 추가stop()현재 활성화된 애니메이션 중지destroy()motion value의 값이 변경될 때 호출되는 콜백 함수 등.. 2024. 10. 6. Framer motion : scroll Animation에 대하여 Framer motion에서 scroll animation 기능은 스크롤과 연동된 애니메이션을 구현할 수 있도록 도와준다. 크게는 (1) scroll-linked animation (스크롤 진행에 따라 애니메이션이 직접적으로 연동되는 방식)과 (2) scroll-triggered animation (요소가 뷰포트에 들어오간 나갈 때 애니메이션이 트리거 되는 방식)으로 나눈다. Scroll-linked animationscroll-linked animation 은 useScroll 훅을 통해서 스크롤과 연동된 애니메이션을 구현한다. scrollX / scrollY : 페이지의 수평 및 수직 스크롤 위치를 픽셀 단위로 반환한다.scrollXProgress / scrollYProgress : 페이지의 수평 .. 2024. 9. 28. Framer motion : Layout Animation에 대해 알아보자 Framer motion의 Layout Animation은 UI 요소의 레이아웃 애니메이션을 부드럽게 전환할 수 있도록 돕는다. 아코디언 메뉴, 리스트 아이템의 추가 및 제거, 드래그 앤 드롭 동작에서의 애니메이션 등에서 사용한다.layout 개별 요소에 애니메이션 효과를 적용할 때 사용한다. 해당 요소의 크기나 위치가 변경될 때 자동으로 애니메이션이 적용된다. 여러 개의 요소를 그룹화(layoutId 사용)하여 함께 애니메이션 효과가 적용될 수 있도록 하는 컴포넌트다. 그룹 내에서 애니메이션 효과가 조화롭게 이루어진다. layout 사용하기개별 요소에 layout 속성을 삽입하면 자동으로 애니메이션이 적용된다. 아래 예제는 에 layout가 있을 때와 없을 때의 차이점이다. layout을 사용했을 때 .. 2024. 9. 28. Framer motion : 제스처(Gestures)에 대해서 (2) drag, pan hover, focus, tap에 대한 내용은 따로 작성한 글이 있다. 이번 글에서는 제스체 중에 drag와 pan에 대해서 알아보고자 한다.제스처설명hover마우스 커서가 요소 위에 올려졌을 때 발생하는 제스처focus요소가 포커스를 받을 때 발생하는 제스처tap사용자가 요소를 클릭하거나 터치했을 때 발생하는 제스처drag사용자가 요소를 클릭하고 드래그하여 위치를 변경할 수 있는 제스처pan사용자가 요소를 누르고 기존의 화면서에서 3픽셀 이동해야 인식되는 제스처 Drag관련 이벤트이벤트는 사용자가 요소를 클릭하고 드래그하여 다른 위치로 이동할 수 있도록 하는 기능을 제공한다. 이벤트설명drag드래그 가능 여부를 설정한다. onDragStart사용자가 드래그를 시작할 때 호출되는 함수 (드래그 시작 시).. 2024. 9. 28. Framer motion : 제스처(Gestures)에 대해서 (1) hover, focus, tap Framer motion의 제스처는 사용자가 웹 페이지나 어플리케이션과 상호작용하는 방식을 얘기한다. Framer motion의 주요 제스처는 호버(hover), 포커스(focus), 탭(tap), 드래그(drap), 팬(pan) 등이 있다. 제스처설명hover마우스 커서가 요소 위에 올려졌을 때 발생하는 제스처focus요소가 포커스를 받을 때 발생하는 제스처tap사용자가 요소를 클릭하거나 터치했을 때 발생하는 제스처drag사용자가 요소를 클릭하고 드래그하여 위치를 변경할 수 있는 제스처pan사용자가 요소를 누르고 기존의 화면서에서 3픽셀 이동해야 인식되는 제스처 리액트에서 제공하는 onMouseOver, onClick, onFocus 이벤트 경우에는 framer motion 에서 정의된 프로퍼티와 함께.. 2024. 9. 28. Framer motion : variants에 대해서 Framer motion에서 variants는 애니메이션의 다양한 상태를 미리 정의하여 반복되는 애니메이션 등의 사용을 간편하게 작성할 수 있다. 하나의 데이터로 여러 곳에서 사용할 수 있어 코드 중복을 줄이고 가독성을 높인다. 1. variants 생성 clickVariants를 생성하여 요소들에게 마우스를 올려놨을 때나 클릭했을 때의 애니메이션을 설정한다.const clickVariants = { initial: { scale: 1 }, hover: { scale: 1.1 }, press: { scale: 0.9 },}; 2. 태그 안에 variants={variants이름} 작성버튼클릭 3. 애니메이션을 적용할 곳에 key 값을 작성initial은 initial에, hover는 .. 2024. 9. 24. 이전 1 2 3 다음