RN动画实现

一、动画使用

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();

};