[TIL] React native Animation 01

React Native는 애니메이션에 사용할 수 있는 4가지 컴포넌트를 제공한다.

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View

3가지 애니메이션 타입

• Timing : 시간이 지남에 따른 값을 애니메이션한다.
• Spring : 간단한 스프링 물리 모델을 제공한다.
• Decay : 초기 속도(initial velocity)로 시작하여 점차 정지

Interpolation

: 일부 오브젝트 스타일은 정수가 아닌 다른형식을 받아들이기 때문에 커스텀 값을 가져와야 할 수도 있다. ex) color, rotation degrees가 있다.

value.interpolate({
  inputRange: [0, 1],
  outputRange: ['0%', '100%'],
});

• inputRange : 애니메이션 값의 범위
• outputRange : 보간 된 값이 inputRange에 맵핑 된 결과

[참고] https://www.devh.kr/2020/Introduction-to-animation-in-React-Native/