import React, {useRef} from 'react';
import {Animated, StyleSheet, View, Button, Text} from 'react-native';
const AnimTwo = () => {
const redSquare = useRef(new Animated.Value(1)).current;
const greenSquare = useRef(new Animated.ValueXY(0, 0)).current;
const blueSquare = useRef(new Animated.ValueXY(0, 0)).current;
const runAnimation = () => {
Animated.sequence([
Animated.timing(redSquare, {
toValue: 0,
}),
Animated.parallel([
Animated.spring(greenSquare, {
toValue: {x: 200, y: 0},
}),
Animated.spring(blueSquare, {
toValue: {x: 200, y: 400},
}),
]),
]).start();
};
return (
<View>
<Animated.View
style={{
opacity: redSquare,
}}>
<View style={styles.redSquare} />
</Animated.View>
<Animated.View style={greenSquare.getLayout()}>
<View style={styles.greenSquare} />
</Animated.View>
<Animated.View style={blueSquare.getLayout()}>
<View style={styles.blueSquare} />
</Animated.View>
<Button title="Animation Start" onPress={runAnimation} />
</View>
);
};
const styles = StyleSheet.create({
redSquare: {
width: 100,
height: 100,
backgroundColor: 'red',
},
greenSquare: {
width: 100,
height: 100,
backgroundColor: 'green',
},
blueSquare: {
width: 100,
height: 100,
backgroundColor: 'blue',
},
});
export default AnimTwo;
hooks 방식으로 하는 소스도 올려봅니다.
evanjin
작성일
21.03.30 16:41
조회수
132
댓글 0