Animated(with Animated, interpolate)

import { TouchableOpacity } from 'react-native'
import { Animated, Easing } from 'react-native'
import styled from 'styled-components/native'

const Conteainer = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`
const Box = styled.View`
  background-color: tomato;
  width: 200px;
  height: 200px;
`

const AnimatedBox = Animated.createAnimatedComponent(Box)

export default function App() {
  const [up, setUp] = useState(false)
  const Y_POSITION = useRef(new Animated.Value(300)).current
  const toggleUp = () => setUp((prev) => !prev)
  const moveUp = () => {
    Animated.timing(Y_POSITION, {
      toValue: up ? 300 : -300,
      useNativeDriver: false,
      easing: Easing.bounce,
      duration: 3000,
    }).start(toggleUp)
  }
  const bgColor = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: ['rgb(255,99,71)', 'rgb(71,166,255)'],
  })

  const rotation = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: ['-360deg', '360deg'],
  })

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

  const borderRadius = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: [100, 0],
  })

  // Y_POSITION.addListener(() => {
  //   console.log(Y_POSITION),
  //     console.log(borderRadius),
  //     console.log(opacityValue)
  // })
  return (
    <Conteainer>
      <TouchableOpacity onPress={moveUp}>
        <AnimatedBox
          style={{
            borderRadius,
            backgroundColor: bgColor,
            opacity: opacityValue,
            transform: [{ rotateY: rotation }, { translateY: Y_POSITION }],
          }}
        />
      </TouchableOpacity>
    </Conteainer>
  )
}

1.Animated settion.

1. import { Animated, Easing } from 'react-native'
2. const Box = styled.View background-color: tomato; width: 200px; height: 200px;
   const AnimatedBox = Animated.createAnimatedComponent(Box)

움직임을 줄려는 Box를 Animated.createAnimatedComponent(Box) 에 담는다.

2-1.

 const [up, setUp] = useState(false)
  const Y_POSITION = useRef(new Animated.Value(300)).current
  const toggleUp = () => setUp((prev) => !prev)
  const moveUp = () => {
    Animated.timing(Y_POSITION, {
      toValue: up ? 300 : -300,
      useNativeDriver: false,
      easing: Easing.bounce,
      duration: 3000,
    }).start(toggleUp)
  }~~~~
 
가장중요한 부분 check!!!!!!!!!!
1.Y_POSITION설정
2. 클릭시 up, setUp true/false 바꿔주는 버튼 설정
3. moveUp 함수 설정.
	Animated. <---3가지 정도 있으나 주로 timing사용.
    toValue 값 설정.
    easing: Easing.   <----여러가지 옵션 존재, 
    duration:    <----애니매이션 진행 시간.
    .start 로 감싸주고 togglUp  넣어줌.


3.
~~~~  return (
    <Conteainer>
      <TouchableOpacity onPress={moveUp}>
        <AnimatedBox
          style={{
            borderRadius,
            backgroundColor: bgColor,
            opacity: opacityValue,
            transform: [{ rotateY: rotation }, { translateY: Y_POSITION }],
          }}
        />
      </TouchableOpacity>
    </Conteainer>
  )
}~~~~

<AnimatedBox ....................
  style={{ .....
  에 변화를 줄려는 값을 넣는다.
  1. borderRadius,
  2. backgroundColor
  3. opacity
  4. transform: [.....
  />~~~~~

4. TouchableOpacity로 감싸서 onPress={moveUp} 클릭이벤트 클릭시 실행될 함수를 만든다.

5. interpolate.

  const bgColor = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: ['rgb(255,99,71)', 'rgb(71,166,255)'],
  })

  const rotation = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: ['-360deg', '360deg'],
  })

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

  const borderRadius = Y_POSITION.interpolate({
    inputRange: [-300, 300],
    outputRange: [100, 0],
  })
  
  
  Check!! inputPange -300~300 변하는 동안 다른 속성들 변화값 입력~
  
  style={{}} 에 변화되는 값입력~~~