react-native实现简单的动画

最新推荐文章于 2024-08-09 08:13:32 发布

花程序媛

最新推荐文章于 2024-08-09 08:13:32 发布

阅读量728

点赞数

本文链接：https://blog.csdn.net/shizhihua11/article/details/88095409

版权

     constructor(props) {
        super(props);

        this.state={
            fade: new Animated.Value(0),
        }
    }

    componentDidMount(){
       this.startAnimation();
    }

   startAnimation() {
        this.state.fade.setValue(0);
        Animated.timing(                            // 随时间变化而执行的动画类型
            this.state.fade,                      // 动画中的变量值
            {
                toValue: 1,                             // 透明度最终变为1，即完全不透明
                duration:1500,
            }
        ).start(() => this.startAnimation());
   }

//页面渲染
<Animated.Image style={[styles.menuImage,{opacity:this.state.fade}]} source={require('../../images/device/homing_game.png')}  resizeMode={"contain"}/>