use-gesture를 사용한 제스처 기반 애니메이션

@use-gesture/react는 react-spring과 원활하게 작동하도록 설계된 제스처 인식 라이브러리입니다. 드래그, 핀치, 스크롤, 호버, 이동, 휠 제스처를 인식하고 정규화된 제스처 상태를 제공하므로, 이를 스프링 설정 함수에 직접 전달하여 유연하고 물리 기반의 상호 작용을 구현할 수 있습니다.

useDrag 훅은 드래그 이벤트가 발생할 때마다 콜백을 실행합니다. 이 콜백은 다음과 같은 주요 속성을 가진 제스처 상태 객체를 받습니다. 이동량(드래그 시작 시점부터의 총 변위), 속도(현재 속도), 방향(각 축의 1 또는 -1), 시작(드래그 시작 시 true), 종료(드래그 종료 시 true), 이벤트(가공되지 않은 DOM 이벤트)입니다.

모든 use-gesture 훅은 bind() 함수를 반환합니다. bind()를 호출하면 이벤트 처리기 속성 객체가 반환됩니다(onPointerDown, onTouchStart 등). 이 객체를 상호 작용이 가능하도록 만들 요소에 펼쳐 적용합니다. 이는 제스처 인식기와 DOM 요소를 연결하는 지점입니다.

표준 패턴은 다음과 같습니다. 명령형 API로 스프링을 생성한 다음([springs, api] = useSpring(...)), useDrag를 사용하여 각 드래그 이벤트에서 api.start({ x: movement[0], y: movement[1] })을 호출합니다. 스프링이 드래그 이동을 부드럽게 따라가므로, 딱딱한 커서 추적에 불과했던 동작에 자연스러운 물리 효과를 더할 수 있습니다.

드래그가 끝나면(제스처 상태에서 last: true), 일반적으로 요소를 원래 위치로 되돌립니다. if (last) 확인문 안에서 api.start({ x: 0, y: 0 })을 호출하십시오. react-spring은 스프링 물리 효과로 요소를 되돌립니다. 즉시 초기화하는 대신 부드럽게 튕겨 돌아오므로 상호 작용에 만족스러운 물리적 느낌을 줍니다.

제스처 상태의 velocity 값으로 던지기 동작을 구현할 수 있습니다. 사용자가 높은 속도로 손을 놓으면 요소를 원위치로 되돌리는 대신 드래그 방향으로 날려 보낼 수 있습니다. if (last && velocity[0] > threshold)를 확인한 다음 요소를 화면 밖의 최종 위치로 애니메이션하십시오. 이는 스와이프로 닫기 상호 작용에 필수적입니다.

컨테이너 안에서 드래그 이동을 제한하려면 스프링에 전달하기 전에 이동량을 제한하십시오. x: Math.max(-maxX, Math.min(maxX, movement[0]))처럼 작성합니다. 또는 use-gesture에 내장된 bounds 옵션을 사용할 수 있습니다. useDrag(handler, { bounds: { left: -100, right: 100 } })로 제스처 상태의 값을 자동으로 제한할 수 있습니다.

모바일에서 스와이프로 닫기를 구현하는 방법은 다음과 같습니다. useDrag로 가로 이동을 추적합니다. 사용자가 놓을 때 속도가 임계값을 초과하거나 OR 화면 너비의 절반보다 더 이동했다면 카드를 화면 밖으로 애니메이션합니다(api.start({ x: window.innerWidth })). 그런 다음 목록에서 카드를 제거합니다. 조건을 만족하지 않으면 카드가 중앙으로 돌아오게 합니다.

usePinch는 터치 화면에서 두 손가락으로 오므리고 벌리는 제스처와 데스크톱에서 Ctrl+휠 동작을 인식합니다. 제스처 상태에는 scale(핀치 시작을 기준으로 한 현재 확대 수준)과 origin(핀치의 중심점)이 포함됩니다. 스케일을 추적하는 스프링에 연결하면 이미지나 지도에서 부드럽고 범위가 제한된 확대 상호 작용을 만들 수 있습니다.

useHover는 포인터가 요소에 들어오거나 요소를 벗어날 때 실행되며 active 불리언 값을 제공합니다. useMove는 요소 안에서 마우스 위치를 추적하고 정규화된 좌표를 제공합니다. 두 훅 모두 포인터가 다가올 때 요소가 포인터 쪽으로 미묘하게 이동하는 자석 같은 호버 효과에 유용합니다.

use-gesture 훅은 함께 조합할 수 있습니다. 같은 요소에 useDrag와 usePinch를 모두 사용할 수 있습니다. const bindDrag = useDrag(...); const bindPinch = usePinch(...)로 생성한 다음 두 bind 함수를 모두 펼쳐 적용합니다. ...bindDrag() ...bindPinch() use-gesture는 제스처 유형을 자동으로 구분합니다.

use-gesture 훅이 반환하는 bind() 함수는 어떤 역할을 하나요?

@use-gesture/react는 useDrag, usePinch, useScroll, useHover, useMove를 제공합니다. 각 훅은 bind() 함수를 반환하며, 이 함수의 전개 결과가 제스처 이벤트를 DOM 요소에 연결합니다. 제스처 상태는 이동량, 속도, 방향, 시작 여부, 종료 여부를 제공합니다. react-spring의 명령형 api.start()와 결합하면 물리 기반의 상호 작용 애니메이션을 만들 수 있습니다. 속도를 사용하여 날리기와 닫기를 구현하고, bounds를 사용하여 이동 범위를 제한하십시오.