RN动画实现

一、动画使用

constructor(props) {

    super(props);

    this.state = {

      // 1. 初始化动画值

      opacity: new Animated.Value(0)

    };

}

render() {

    return (

     

       

          style={{

            // 2. 将动画值绑定到style的属性:opacity透明度

            opacity: this.state.fadeAnim,

          }}

        >

          RN的动画使用

       

       

     

    );

}

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

};