一、动画使用
constructor(props) {
super(props);
this.state = {
// 1. 初始化动画值
opacity: new Animated.Value(0)
};
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Animated.Text
style={{
// 2. 将动画值绑定到style的属性:opacity透明度
opacity: this.state.fadeAnim,
}}
>
RN的动画使用
</Animated.Text>
<Button title="开启动画" onPress={this.press} />
</View>
);
}
press = () => {
//3.动画处理以及开启
Animated.timing(this.state.scale, {
toValue: 3,
duration: 5000
}).start();
};
press = () => {
//3.动画处理以及开启
const animations = [
Animated.timing(this.state.opacity, {
toValue: 3,
duration: 5000
}),
Animated.timing(this.state.width, {
toValue: 500
}),
Animated.timing(this.state.height, {
toValue: 500
})
];
Animated.stagger(5000, animations).start();
};
