[React Native] Animate 효과 주기

1. 먼저 아래와 같이 Animate를 import해준다

import {
    Animated
} from 'react-native';

 

 

2. Component의 state에 아래와 같이 Animated될 값을 new Animated.Value(초기값) 으로 설정해준다.

this.state={
    fadeVal: new Animated.Value(0)
};

 

3. render() 내부에 아래와 같이 Animated.View를 넣어 Animation효과를 줄 것이라고 명시한다(Animated.Text 등, View가 아닌 다른 컴포넌트들도 넣을 수 있음).

또한, Animate할 부분(아래와 같은 경우엔 opacity)에 2.번에서 설정한 값을 입력해준다.

<Animated.View style={[styles.animationView, {
    opacity: this.state.fadeVal,
    left: this.state.xVal
}]}>

</Animated.View>

 

4. Animate가 되게 하기 위해서 아래와 같이 function을 만들어준다. Animated.timing(변경할 변수,변경하는 방식).start(); 를 통해 작동한다.

fadeAnimation(value = 2000){
    Animated.timing(this.state.fadeVal,{
        toValue:1,
        duration:value
    }).start();
}

moveAnimation(value = 50){
    this.fadeAnimation();
    Animated.timing(this.state.xVal,{
        toValue:value,
        duration:1000,
        easing:Easing.linear
    }).start();
}