필요한 animation 효과들 만들어보기

[byyoungjin]

• [x] 효과들 listup
• [x] 기본 트렌지션 구현
• [x] shared-element transition 구현 -> expo 상에서 가끔 버벅거림

[byyoungjin]

라이브러리 후보군 탐색

https://blog.logrocket.com/the-top-6-animation-libraries-in-react-native/#:~:text=One%20of%20the%20most%20popular,in%20a%20React%20Native%20app.

일단 아래 2 라이브러리가 기본일듯

Reanimated : 기존에 javascript thread 에서 실행되던 에니매이션을 UI thread 에서 실행하게 함으로써 로드를 줄임, version 1 에서 declarative API 에서 오는 한계점을 개선하여 version 2 를 release 함 react native built in 인 Animated 는 기본적으로 JS thread 에서 실행됨! (제한적으로 UI thread 에서 실행할 수도 있다.)

react-native-gesture-handler : 위 react-native-reanimated 와 함께 쓰기좋음, (같은 단체에서 관리하는듯)

react-native-redash : 위 라이브러리들을 위한 toolbelt Can it be done with react native 라고하는 youtube 채널운영하는사람이 만듬

[byyoungjin]

애니메이션 list

기본 애니메이션 기본 애니메이션 with gesture

프로젝트에 넣으면 좋을만한 것들

Shared Transition_ Air bnb Stack navigation Transition

재밌어보임

Liquid Swipe Darkroom color Grading

[byyoungjin]

기본 애니메이션 만들어보는중

[byyoungjin]

reanimated 2 는 turboModule 을 사용한다.

https://github.com/react-native-community/discussions-and-proposals/issues/195

turbo module 은 아직 production 단계는 아닌듯 그래도 expo 에서도 지원하기 시작하고, 점점 stable 해지고 있는것 같다.

[byyoungjin]

Shared transition

react-navigation-shared-element 사용

react navigation 5 에서 shared Transition <-- react-navigation-shared-element 에서 react navigiaont 5 적용하는 내용!

react navigation 5 + shared element 라이브러리 이용해서 만드는 내용

[byyoungjin]

issue: react-nvigation-shared-element

아직 내부적으로 V4인, react-navigation , react-nafigation-stack 사용하는듯

[byyoungjin]

animation 이 완료된후, 특정 로직을 실행시키는데에는 react-native-animatable 사용하기 편함 ( reanimated 에서도 적용할 수있는지 알아볼것 )