스킬 자체의 표현으로
React Native와 Expo에서의 모션을 위한 구축용 스킬입니다. 애니메이션 요청을 실제 기기에서 리뷰를 통과할 수 있는 구현으로 전환하며, 느낌이 맞는지를 결정하는 순서대로 판단을 내립니다: 애니메이션을 적용해야 하는지, 어떤 스레드에서 실행되는지, 어떤 속성인지, 스프링인지 타이밍인지, 제스처가 어떻게 전달되는지, 어떻게 저하되는지.
모든 것은 모바일의 세 가지 사실에서 출발합니다: hover가 없다는 점, 두 개의 런타임이 존재한다는 점, 사용자의 손가락이 요소 위에 있다는 점입니다. Expo 앱을 애니메이션화하거나, 제스처, 시트, 화면 전환, 누름 피드백, 햅틱을 추가하거나, 기기에서 끊기는 모션을 수정하는 모든 사람을 위한 것입니다. 코드는 Reanimated, Gesture Handler, Expo Router, expo-haptics로 작성됩니다.
산출물
- 선택지로 제시되지 않고 직접 작성된 구현 코드 자체입니다.
- 빈도 등급과 지정된 목적을 명시하는 짧은 게이트 결과로, 무엇이 거부되었는지와 그 이유를 포함합니다.
- 재료 목록: 도구, 속성, 스프링 또는 커브와 지속 시간, 그리고 작업이 실행되는 런타임.
- 제스처 핸드오프와 햅틱 타이밍은 코드만으로 확인할 수 없으므로, 실제 기기에서 감각적으로 확인해야 할 항목 목록입니다.
작동 방식
- 01애니메이션을 다른 무엇보다 먼저 게이트하기
빈도 표는 애니메이션이 발생할지 여부 자체를 결정하며, 최상위 등급은 멈추고 코드를 작성하지 않습니다. 탭은 계층이 아니라 동등한 대상이므로 탭 전환은 절대 슬라이드하지 않습니다.
- 02목적을 한 단어로 명시합니다
이 스킬은 진행하기 전에 단어 하나로 된 의도를 강제합니다 — 피드백, 공간적 일관성, 상태 표시, 급격한 변화 방지, 설명, 또는 즐거움(마지막은 드문 첫 경험 순간에만 해당).
- 03작동하는 가장 저비용 도구 선택하기
표를 따라 내려가며 맞는 첫 번째 행에서 멈춥니다: CSS transition, CSS keyframes, 레이아웃 애니메이션, shared value와 Gesture, 그다음 네이티브 스택, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie 또는 Skia.
- 04애니메이션 대상 속성 제한하기
transform과 opacity는 비용이 들지 않지만, 그 외의 모든 속성은 레이아웃 패스를 강제해 해당 노드와 형제 노드에 대해 매 프레임 Yoga를 다시 실행하게 만듭니다.
- 05손가락 동작에 따라 스프링 또는 타이밍 선택하기
손가락이 주도한 모든 인터랙션에는 스프링을 사용해 인터럽션 중에도 속도가 이어지도록 하며, 그 외에는 타이밍 커브를 사용하되 절대 ease-in은 사용하지 않습니다.
- 06프레임을 JS 스레드에서 분리하기
shared value는 React state 대신 useAnimatedStyle에 전달되며, RN 런타임 호출은 제스처 업데이트 안에서 실행되는 대신 onEnd나 임계값 반응으로 미뤄집니다.