import React, {useRef} from 'react';
import {Easing, Animated, StyleSheet, View, Button} from 'react-native';
const AnimOne = () => {
const mySquare = useRef(new Animated.ValueXY(0, 0)).current;
const runAnimation = () => {
Animated.timing(mySquare, {
toValue: {x: 50, y: 300},
duration: 2000,
delay: 1500,
easing: Easing.elastic(3),
useNativeDriver: false,
}).start();
};
return (
<View>
<Animated.View style={mySquare.getLayout()}>
<View style={styles.square} />
</Animated.View>
<Button title="Animation Start" onPress={runAnimation} />
</View>
);
};
const styles = StyleSheet.create({
square: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
},
});
export default AnimOne;
hooks 방식으로 하는 소스도 올려봅니다.
evanjin
작성일
21.03.30 11:26
조회수
128
댓글 0