React native 애니메이션 ( 이동후 회전 + 뷰 등장 ) 연습

import React, { Component } from 'react';
import { 
  StyleSheet, 
  Dimensions, 
  View ,
  Image, 
  Text ,
  Animated,
  Easing,
  TouchableOpacity} from "react-native";


const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");

export default class App extends Component{
  constructor(){
    super()

    this.state = {
      is_showing : false,
    }

    this.animation =  new Animated.Value(0), // 이동 
    this.animation2 = new Animated.Value(0), // 회전

    // 애니메이션 이벤트 리스너 발생 
    this.animation.addListener(this.my_listener);
  }

  test(){

    let moving_ani =  Animated.timing(
      this.animation,
      {
        toValue: 1,
        duration: 2000,
        //useNativeDriver: true, top 모듈에는 사용할 수 X 
      }
    )

    let deg_ani = Animated.timing(
      this.animation2,{
        toValue: 200,
        duration: 3000,
      }
    )
  
    //애니메이션 순차 진행 
    Animated.sequence([
      moving_ani,
      deg_ani
    ]).start(()=>{
      console.log("종료 후 콜백")
      this.animation.setValue(0)
      this.animation2.setValue(0)
      this.setState({
        is_showing : false
      })
    });
  }

  my_listener = ({value})=>{ 
    if(value == 1){
      setTimeout(() => {
        this.setState({
          is_showing: true
        })
      }, 1000);
    }
  }

  Water(){
    let test_st = {
      top:this.animation.interpolate({
        inputRange: [0,1],
        outputRange: ['91.5%', '20%']
      }),

      left:this.animation.interpolate({
        inputRange: [0,1],
        outputRange: ['87%', '60%']
      }),
      
      transform: [{
        rotate: this.animation2.interpolate({
          inputRange: [0, 40,50,150,160, 200],
          outputRange: ['0deg', '-60deg', '-90deg','-90deg', '-60deg', '0deg']
        })
      }]
    }

    return(
      <Animated.View style= {{ 
        position:'absolute',
        height:50,
        width:50,
        backgroundColor: 'red',
        ...test_st
      }}
      >
      </Animated.View>
    )
  }

  render(){
    const {is_showing} = this.state
    return(
      <>
        <View style={{ flex: 1 }}>

          <View style={{ flex: 1, backgroundColor: 'gray' }}>

          </View>

          <View style={{ height: 80, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center' }}>

            {/*  레벨? */}
            <View style={{ flex: 1 }}>

              <TouchableOpacity style={{ height: 60, width: 60, backgroundColor: 'red' }}
                onPress={() => this.test()}
              >
                <Text>테스트</Text>
              </TouchableOpacity>

            </View>

            <View style={{ height: 60, width: 60, backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center' }}
            // onLayout = {({nativeEvent})=> console.log("nativeEvent : ",nativeEvent.layout)}
            >
              <TouchableOpacity
                style={{ height: 60, width: 60, backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center' }}
              //onPress ={()=>this.setState({is_showing : !this.state.is_showing})}
              >
                <Text style={{ color: 'white' }}> 물 주기 </Text>
              </TouchableOpacity>
            </View>
          </View>

          {this.Water()}

          {
            is_showing ?
              <View style={{ position: 'absolute', backgroundColor: 'white', width: 20, height: 20, top: '25%', left: '55%' }}>
              </View>
              :
              <View></View>
          }

        </View>
      </>
    )
  }
  
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF"
  },
  container2: {
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  }
});