ReactNative Animated Interpolation 예제

이전글

2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules!

2023.01.31 - [개발로그/ReactNative] - React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함

2023.02.01 - [개발로그/ReactNative] - 에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef)

Interpolation (공부중)

inputRange의 데이터를 주면 ouputRange 데이터값들로 변환하여 반환해준다. 

const opacity = Y_POSITION.interpolate({
inputRange: [-300, 0, 300],
outputRange: [1, 0 , 1],
});

Y_POSITION.addListener(()=> console.log(opacity))

콘솔에 찍히는 로그는 -300 일때 1, 0 일때 0 , 300일때 1이 된다. 

반환되는 값은 컴포넌트에서 아래와 같이 사용될 수 있다.  

<AnimatedBox
    style={{
        opacity: opacityValue,
        transform: [{ translateY: Y_POSITION }],
    }}
/>

또는 이렇게도 표현할 수 있다. 

<AnimatedBox
    style={{
        opacity,
        transform: [{ translateY: Y_POSITION }],
    }}
/>

 

and ALSO 색깔이나 문자열도 interpolsate 될 수 있다.