Animated(ValueXY, loop, sequence..)

import React, { useEffect, useRef, useState } from 'react'
import { Dimensions, 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)

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

export default function App() {
  const POSITION = useRef(
    new Animated.ValueXY({
      x: -SCREEN_WIDTH / 2 + 100,
      y: -SCREEN_HEIGHT / 2 + 100,
    })
  ).current
  const topLeft = Animated.timing(POSITION, {
    toValue: {
      x: -SCREEN_WIDTH / 2 + 100,
      y: -SCREEN_HEIGHT / 2 + 100,
    },
    useNativeDriver: false,
  })

  const bottomRight = Animated.timing(POSITION, {
    toValue: {
      x: SCREEN_WIDTH / 2 - 100,
      y: SCREEN_HEIGHT / 2 - 100,
    },
    useNativeDriver: false,
  })
  const bottomLeft = Animated.timing(POSITION, {
    toValue: {
      x: -SCREEN_WIDTH / 2 + 100,
      y: SCREEN_HEIGHT / 2 - 100,
    },
    useNativeDriver: false,
  })
  const topRight = Animated.timing(POSITION, {
    toValue: {
      x: SCREEN_WIDTH / 2 - 100,
      y: -SCREEN_HEIGHT / 2 + 100,
    },
    useNativeDriver: false,
  })
  const moveUp = () => {
    Animated.loop(
      Animated.sequence([bottomLeft, bottomRight, topRight, topLeft])
    ).start()
  }

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

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

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

  const borderRadius = POSITION.y.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 },
              ...POSITION.getTranslateTransform(),
            ],
          }}
        />
      </TouchableOpacity>
    </Conteainer>
  )
}

Box가 화면을 계속 도는것.

1. const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
   Dimensions를 통해 window의 가로, 세로 길이 측정

2. const POSITION = useRef(
   new Animated.ValueXY({
   x: -SCREEN_WIDTH / 2 + 100,
   y: -SCREEN_HEIGHT / 2 + 100,
   })
   ).current
   ----------->시작하는 위치를 잡아줌

3. topLeft, bottomLeft, bottomRight, topRight 함수를 만들어서
   이동하게 될 위치를 잡아줌.

const topLeft = Animated.timing(POSITION, {
    toValue: {
      x: -SCREEN_WIDTH / 2 + 100,
      y: -SCREEN_HEIGHT / 2 + 100,
    },
    useNativeDriver: false,
  })

4. const moveUp = () => {
      Animated.loop(
        Animated.sequence([bottomLeft, bottomRight, topRight, topLeft])
      ).start()
    }

   moveUp함수(bottomLeft, bottomRight, topRight, topLeft 함수가 차례대로 실행되도록 정의)를 만들어줌. loop는 도돌이표, sequence는 차례대로 움직이게 하는 명령어.