개발자가 알려주는 프레이머 프레임(Frame) 컴포넌트를 다루는 마지막 포스팅입니다. 첫 번째 강의에서는 컴포넌트의 위치나 크기 그리고 시각적 요소를 다루는 Layout과 Visual에 대해서 다뤄봤고, 두 번째 강의에서는 프레임을 동적으로 변환시켜주는 Transform, Animation, Transition, Variants 속성들에 대해서 알아봤었습니다.
해당 부분을 안 보셨다면 한번 보고 오시는 걸 추천드릴게요!
- [개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual)
- [개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variants)
이번 강의에서는 프레임(Frame) 컴포넌트에서 사용할 수 있는 이벤트(제스처) Tap, Hover, Pan, Drag들을 다뤄보도록 하겠습니다. 나중에 오버라이드(Overrides) 부분을 다룰 때 이런 부분들을 확실하게 알고 있으셔야 구현하시기 편하실겁니다!
Tap
탭 제스처는 사용자가 버튼을 누르거나, 요소를 손가락으로 터치했을 때 발생하는 이벤트입니다.
프레이머에서 제공하는 탭 이벤트는 사용자가 화면을 누른 시점을 감지하여 각 상황에 맞는 콜백 함수를 제공합니다.
예를 들어 사용자가 탭을 누른 시작점은 onTapStart 이벤트를 통해 알 수 있고 탭을 작동하다가 프레임을 이탈할 경우 탭 이벤트가 취소되었음을 알려주는 onTapCancel 이벤트 그리고 마지막으로 성공적으로 탭 동작을 마쳤다면 onTap 이벤트를 통해 알 수 있습니다.
whileTap: string | TargetAndTransition
컴포넌트를 누르고 있는 동안 원하는 애니메이션 효과를 줄 수 있습니다.
onTap(event, info)
탭 제스처를 성공적으로 마치면 동작하는 콜백함수입니다.
event : MouseEvent | TouchEvent | 포인터 이벤트
포인터 이벤트 객체
info : TapInfo
탭 제스처의 x, y 값을 포함한 객체
onTapStart(event, info): void
사용자가 탭 제스처를 시작할 때 동작하는 콜백함수입니다.
event : MouseEvent | TouchEvent | 포인터 이벤트
포인터 이벤트 객체
info : TapInfo
탭 제스처의 x, y 값을 포함한 객체onTapCancel(event, info): void
사용자가 탭 제스처를 수행한 컴포넌트를 이탈했을 때 발생하는 콜백함수입니다.
event : MouseEvent | TouchEvent | 포인터 이벤트
포인터 이벤트 객체
info : TapInfo
탭 제스처의 x, y 값을 포함한 객체
Hover
호버 제스처는 포인터가 구성 요소 위로 마우스를 가져가거나 떠날 때를 감지합니다.
onMouseEnter 및 onMouseLeave와 다릅니다. 터치 입력에서 에뮬레이트 된 브라우저 생성 마우스 이벤트와 달리 실제 마우스 이벤트의 결과로만 호버가 실행되도록 보장됩니다.
whileHover: string | TargetAndTransition
컴포넌트를 마우스 오버하고 있는 동안 원하는 애니메이션 효과를 줄 수 있습니다. 아래 예시는 마우스 오버하고 있을 때 프레임의 scale과 백그라운드 색상을 변경합니다.
onHoverStart(event, info): void
사용자가 마우스 오버를 시작했을 때 발생하는 콜백함수입니다.
event : MouseEvent | TouchEvent | 포인터 이벤트
포인터 이벤트 객체
info : TapInfo
탭 제스처의 x, y 값을 포함한 객체onHoverEnd(event, info): void
사용자가 마우스 오버를 끝냈을 때 발생하는 콜백함수입니다.
event : MouseEvent | TouchEvent | 포인터 이벤트
포인터 이벤트 객체
info : TapInfo
탭 제스처의 x, y 값을 포함한 객체
Pan
팬 제스처란 손가락을 댄 후, 손을 떼지 않고 계속적으로 드래그하는 움직임을 말합니다. 움직이는 방향이나 시간의 제한은 없으며 손을 뗄 때까지 패닝으로 인식합니다.
onPan(event, info): void
팬 제스처가 시작된 이후로 이벤트가 종료될 때까지 onPan 콜백이 호출됩니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.
onPanStart(event, info): void
팬 제스처가 시작될 때 호출되는 콜백함수입니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.onPanEnd(event, info): void
팬 제스처가 종료될 때 호출되는 콜백함수입니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.
Drag
드래그 제스처는 컴포넌트의 x축 그리고 y축 포인터 이동을 감지합니다.
onDrag(event, info): void
드래그 제스처를 동자하고 있을 때 호출되는 콜백함수입니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.
onDragStart(event, info): void
드래그 제스처를 시작했을 때 호출되는 콜백함수입니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.onDragEnd(event, info): void
드래그 제스처가 끝났을 때 호출되는 콜백함수입니다.
이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트
정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체
point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.
onDirectionLock(axis): void
x축이나 y축 둘 중 한 방향으로 이동하게끔 방향을 고정합니다.
drag: boolean | "x" | "y"
컴포넌트에 드래그 제스처를 활성화시킬 지 결정하는 속성값입니다. 기본값은 false 입니다.
true로 설정하면 x축 y축 모든 방향이 설정되고 x축이나 y축 둘 중 하나만 선택해서 설정할 수 있습니다.
dragConstraints: false | Partial<BoundingBox2D> | RefObject<Element>
top, left, right, bottom의 값들을 활용해서 범위를 제한시키는데 사용됩니다. 아래 dragElastic과 같이 사용하는 예시를 보면 훨씬 이해하기 쉽습니다.
dragElastic: boolean | number
외부 제약이 허용되는 이동 정도입니다.
0 = 움직임 없음, 1 = 완전 움직임
기본값은 0.5입니다.
dragConstraints 속성값으로 영역을 제한해놓고 제한된 영역으로 넘어갔을 때 dragElastic 수치에 따라서 얼마나 넘어가서 돌아올지에 대한 결정을 합니다.
dragMomentum: boolean
드래그가 끝나면 팬 제스처에서 컴포넌트로 운동량을 적용합니다. 기본값은 true입니다.
dragTransition: InertiaOptions
드래그 제스처에 트랜지션 효과를 줄 수 있습니다.
dragPropagation: boolean
드래그 제스처를 자식 컴포넌트에게 전파 할 수 있습니다. 기본값은 false입니다.
🎉 마무리
이번 포스팅에서는 프레임 컴포넌트의 제스처와 관련된 부분들인 Tap, Hover, Pan, Drag 이벤트에 대해서 알아봤습니다.
터치 제스처를 제어하는 Tap, 포인터를 올려놓을 때 발생하는 Hover, 손가락을 댄 후, 손을 떼지 않고 계속적으로 드래그를 할 때 발생하는 Pan 그리고 드래그를 했을 때 발생하는 Drag 제스처까지 프레임(Frame) 컴포넌트를 사용할 때 굉장히 빈번하게 사용되는 이벤트를 다뤄봤습니다.
코드로 컴포넌트에 다양한 기능을 부여할 때 이런 콜백함수를 굉장히 많이 사용하게 되는데요. 해당 기능들을 머릿속에 가지고 있으면 구현할 때 굉장히 많이 도움이 되리라 생각합니다!
다음 포스팅에서는 프레이머(Framer)에서 많이 사용되는 Stack을 다뤄보겠습니다.
'강의 > Framer' 카테고리의 다른 글
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
