一录别、動(dòng)畫(huà)使用
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? // 1. 初始化動(dòng)畫(huà)值
? ? ? opacity: new Animated.Value(0)
? ? };
}
render() {
? ? return (
? ? ? <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
? ? ? ? <Animated.Text
? ? ? ? ? style={{
? ? ? ? ? ? // 2. 將動(dòng)畫(huà)值綁定到style的屬性:opacity透明度
? ? ? ? ? ? opacity: this.state.fadeAnim,
? ? ? ? ? }}
? ? ? ? >
? ? ? ? ? RN的動(dòng)畫(huà)使用
? ? ? ? </Animated.Text>
? ? ? ? <Button title="開(kāi)啟動(dòng)畫(huà)" onPress={this.press} />
? ? ? </View>
? ? );
}
press = () => {
? ? //3.動(dòng)畫(huà)處理以及開(kāi)啟
? ? Animated.timing(this.state.scale, {
? ? ? toValue: 3,
? ? ? duration: 5000
? ? }).start();
};
press = () => {
? ? //3.動(dòng)畫(huà)處理以及開(kāi)啟
? ? 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();
};
