React Native

애니메니션 - slide up

Machine_웅 2020. 7. 8. 12:07
728x90
반응형
  const slideUp = {
            transform: [
                {
                    translateY: this.state.animation.interpolate({
                        inputRange: [0.01,1],
                        outputRange: [500, 0],
                        extrapolate: "clamp",
                    }),
                },
            ],
        };
  <Animated.View   style= {[slideUp ]}>
componentDidMount(){
      
        Animated.timing(this.state.animation, {
            toValue: 1,
            duration: 300,
            useNativeDriver: true,
        }).start();
    }
constructor(props) {
        super(props);
        this.state = {
            animation: new Animated.Value(0),
        }

    }

 

 

 interpolate :   값의 변화를 계속 시스템에 전달해줌.

 

 

 

참고 : https://codedaily.io/tutorials/64/Create-a-Custom-Animated-Bottom-Action-Sheet-without-Measuring-in-React-Native

728x90
반응형

'React Native' 카테고리의 다른 글

react native native module ( 네이티브 모듈 )  (0) 2020.07.10
react native 인디케이터 중앙 배치  (0) 2020.07.10
react native bottom Tab 관련  (0) 2020.06.27
ref 사용법  (0) 2020.06.24
react native android windowSoftInputMode  (0) 2020.06.17