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가 화면을 계속 도는것.
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
Dimensions를 통해 window의 가로, 세로 길이 측정
const POSITION = useRef(
new Animated.ValueXY({
x: -SCREEN_WIDTH / 2 + 100,
y: -SCREEN_HEIGHT / 2 + 100,
})
).current
----------->시작하는 위치를 잡아줌
topLeft, bottomLeft, bottomRight, topRight 함수를 만들어서
이동하게 될 위치를 잡아줌.
const topLeft = 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()
}
moveUp함수(bottomLeft, bottomRight, topRight, topLeft 함수가 차례대로 실행되도록 정의)를 만들어줌. loop는 도돌이표, sequence는 차례대로 움직이게 하는 명령어.