React로 표현하는 UI 모션 디자인【마우스 & 터치 패널 제스처】

이하 기사의 계속이 됩니다.

React로 표현하는 UI 모션 디자인【모션 스타일링】

이전 기사에서 모션 스타일링을 통해 어떤 표현이 가능해지는지 배웠습니다.

지금까지의 기사에서는 어느 쪽인가 하면, 모션의 역할은 단순히 움직이고 있는 것을 보는 것만의 「동영상(애니메이션)」에 가까웠던 것이, 이번부터 유저의 입력을 받아들이는 것에 의해 「인터페이스로서의 기능 '의 역할을 갖게 됩니다.

자동차로 말하는 「가속」 「브레이크」 「핸들」등의 기능을 동작시키기 위한 트리거와 동의가 되어 있어, 차에 있어서도 브레이크의 효과가 나쁘거나 핸들의 조작성이 나쁘면 현저하게 유저 체험 가 나빠져 버리듯이, UI 인터페이스의 동작이 나쁘면 사용자에게 사용하기 어려움을 느끼게 됩니다.

마우스 제스처 기법

react-spring 와 react-use-gesture 를 사용하면서, 마우스로부터의 입력을 받아 모션을 변화시키는 일반적인 방법에 대해서 검증을 실시해 갑니다.

htps : // 우세게 s 얽힌. 네 tぃfy. 아 p/

여기에서는 스니펫으로 활용할 수 있도록 간단한 예를 샘플로 올리고 있습니다만, 모션 스타일링이나 SVG 일러스트와 조합함으로써 다양한 인터페이스를 실현하는 것도 가능합니다.

클릭/더블 클릭

호버

※ 마우스 제스처만의 동작

h tps : // 코데 씨 d 보 x. 이오 / s / 호 ぇ r pw

드래그 앤 드롭

htps : // 코데씨 d보 x. 이오 / s / d 등 g-8bzyb

마우스 이동

h tps : // 코데 씨 d 보 x. 이오 / s / 이미 8 ~ 8

마우스 휠

h tps : // 코데 씨 d 보 x. 이오 / s / 우에 l - w5bv

핀치

※ 터치 패널 제스처만의 동작