[개발자가 알려주는 프레이머(Framer) #1-3] Frame 컴포넌트 완벽정리 (Tap, Hover, Pan, Drag)

남양주개발자

·

2020. 7. 19. 23:16

728x90
반응형

개발자가 알려주는 프레이머 프레임(Frame) 컴포넌트를 다루는 마지막 포스팅입니다. 첫 번째 강의에서는 컴포넌트의 위치나 크기 그리고 시각적 요소를 다루는 Layout과 Visual에 대해서 다뤄봤고, 두 번째 강의에서는 프레임을 동적으로 변환시켜주는 Transform, Animation, Transition, Variants 속성들에 대해서 알아봤었습니다.

해당 부분을 안 보셨다면 한번 보고 오시는 걸 추천드릴게요!

 

이번 강의에서는 프레임(Frame) 컴포넌트에서 사용할 수 있는 이벤트(제스처) Tap, Hover, Pan, Drag들을 다뤄보도록 하겠습니다. 나중에 오버라이드(Overrides) 부분을 다룰 때 이런 부분들을 확실하게 알고 있으셔야 구현하시기 편하실겁니다!

Tap

탭 제스처는 사용자가 버튼을 누르거나, 요소를 손가락으로 터치했을 때 발생하는 이벤트입니다.

프레이머에서 제공하는 탭 이벤트는 사용자가 화면을 누른 시점을 감지하여 각 상황에 맞는 콜백 함수를 제공합니다.

예를 들어 사용자가 탭을 누른 시작점은 onTapStart 이벤트를 통해 알 수 있고 탭을 작동하다가 프레임을 이탈할 경우 탭 이벤트가 취소되었음을 알려주는 onTapCancel 이벤트 그리고 마지막으로 성공적으로 탭 동작을 마쳤다면 onTap 이벤트를 통해 알 수 있습니다.

whileTap: string | TargetAndTransition

컴포넌트를 누르고 있는 동안 원하는 애니메이션 효과를 줄 수 있습니다.

whileTap을 활용해서 탭을 누르고 있는 동안 효과를 주고 있는 예시

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 값을 포함한 객체

onTapStart, onTapCancel 콜백함수 예시

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 값을 포함한 객체

onHoverStart와 onHoverEnd를 동작시켜보는 예시

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 : 포인터의 현재 속도.

onPanStart, onPanEnd 콜백함수 동작 예시

Drag

드래그 제스처는 컴포넌트의 x축 그리고 y축 포인터 이동을 감지합니다.

onDrag(event, info): void

드래그 제스처를 동자하고 있을 때 호출되는 콜백함수입니다.

 

이벤트 : MouseEvent | TouchEvent | 포인터 이벤트
원래 포인터 이벤트

정보 : PanInfo
다음에 대한 x / y 값을 포함하는 PanInfo 객체

point : 장치 또는 페이지와 관련이 있습니다.
delta : 마지막 이벤트 이후 이동 한 거리.
offset : 원래 팬 이벤트에서 오프셋.
velocity : 포인터의 현재 속도.

onDrag 콜백함수를 동작시켜보는 예시

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 : 포인터의 현재 속도.

onDragStart와 onDragEnd 콜백함수 예시

onDirectionLock(axis): void

x축이나 y축 둘 중 한 방향으로 이동하게끔 방향을 고정합니다. 

onDirectionLock 콜백함수 동작 예시

drag: boolean | "x" | "y"

컴포넌트에 드래그 제스처를 활성화시킬 지 결정하는 속성값입니다. 기본값은 false 입니다.

true로 설정하면 x축 y축 모든 방향이 설정되고 x축이나 y축 둘 중 하나만 선택해서 설정할 수 있습니다.

x축이나 y축 하나만 선택해서 세팅한 예시

dragConstraints: false | Partial<BoundingBox2D> | RefObject<Element>

top, left, right, bottom의 값들을 활용해서 범위를 제한시키는데 사용됩니다. 아래 dragElastic과 같이 사용하는 예시를 보면 훨씬 이해하기 쉽습니다.

dragElastic: boolean | number

외부 제약이 허용되는 이동 정도입니다.
0 = 움직임 없음, 1 = 완전 움직임

기본값은 0.5입니다.

dragConstraints 속성값으로 영역을 제한해놓고 제한된 영역으로 넘어갔을 때 dragElastic 수치에 따라서 얼마나 넘어가서 돌아올지에 대한 결정을 합니다.

dragElastic 속성값 예시

dragMomentum: boolean

드래그가 끝나면 팬 제스처에서 컴포넌트로 운동량을 적용합니다. 기본값은 true입니다.

dragMomentum 속성 예시 드래그가 끝날 때 운동량을 확인할 수 있다

dragTransition: InertiaOptions

드래그 제스처에 트랜지션 효과를 줄 수 있습니다.

드래그 트랜지션 예시

dragPropagation: boolean

드래그 제스처를 자식 컴포넌트에게 전파 할 수 있습니다. 기본값은 false입니다.

🎉 마무리

이번 포스팅에서는 프레임 컴포넌트의 제스처와 관련된 부분들인 Tap, Hover, Pan, Drag 이벤트에 대해서 알아봤습니다.

터치 제스처를 제어하는 Tap, 포인터를 올려놓을 때 발생하는 Hover, 손가락을 댄 후, 손을 떼지 않고 계속적으로 드래그를 할 때 발생하는 Pan 그리고 드래그를 했을 때 발생하는 Drag 제스처까지 프레임(Frame) 컴포넌트를 사용할 때 굉장히 빈번하게 사용되는 이벤트를 다뤄봤습니다.

코드로 컴포넌트에 다양한 기능을 부여할 때 이런 콜백함수를 굉장히 많이 사용하게 되는데요. 해당 기능들을 머릿속에 가지고 있으면 구현할 때 굉장히 많이 도움이 되리라 생각합니다!

다음 포스팅에서는 프레이머(Framer)에서 많이 사용되는 Stack을 다뤄보겠습니다.

728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

1개의 댓글

  • 임용진

    2020.10.03 22:59

    안녕하세요 ㅠㅠ 저는 노원에 살고 있는 30대 회사원입니다. 프레이머로 현재 제가 생각하는 앱 디자인을 구현하고자 하는데요..텍스트를 영화 자막처럼 혹은 음악앱의 가사 플레이처럼 구현하려면 어떻게 해야할까요 ㅠㅠ꼭좀 알려주시면 감사하겠습니다...ㅠㅠ부탁드립니다.ㅠㅠㅠ