[React-Native] Animation - 1 / RN Animation의 한계

How does it work?

• Animation Driver는 requestAnimationFrame 를 이용하여 애니메이션에 필요한 모든 값을 업데이트 합니다
• 중간에 값이 계산되어 Props로 전달됩니다.
• View는 setNativeProps를 이용하여 업데이트 합니다.

 

js내에서 계산하기에 성능에 문제를 준다. 이것을 해결하기 위해서 useNativeDriver라는 옵션을 주면 native에서 계산을 한다.

하지만 모든 animation에 적용되는 것이 아니다. transform, opacity 등에는 적용되지만, position, flexbox 등에는 적용되지 않는다.

우리고 위치이동, 드래그 등을 생각해보면 된다. 이런 곳에는 적용되지 않는다. 또한 항상 Animation start를 JS 쓰레드에서 호출하는 문제가 있다. 예를 들어서 우리가 x좌표가 1인 지점에서 300인 지점까지 드래그 했을때,  native에서 작동하는 것이 아니라 JS 쓰레이드에서 여러번 호출해서 이동하게 된다. 이것은 Native와의 오버헤드가 계속 발생해서 Frame을 떨어트리게 된다.

 

 

정리

• JS 쓰레드에서 돌기 때문에 성능에 영향을 준다.
• useNativeDriver 옵션을 true을 준다고 해결이 되는 것이 아니다.
  • transform, opacity는 Native에서 작동하지만, Flexbox, Position은 작동하지 않는다.
  • 여전히 start는 JS 쓰레이드에서 해야하는 문제가 있다.
• reanimated 라이브러리를 이용하여 해당 문제를 해결할수 있다.