您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页react native 动画(Animations) 一

react native 动画(Animations) 一

来源:伴沃教育
简单的动画

创建Animated的过程:

  1. 创建Animated.Value设置初始值
 //构造函数中初始化一个带动画属性的值用于旋转动画的初始值
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0),//
        }
    }
  1. AnimatedValue绑定到Style的可动画属性,
    比如透明度,{opacity: this.state.fadeAnim}
<Animated.Text style={{opacity: this.state.fadeAnim}}>//绑定到属性
         Welcome to React Native!
</Animated.Text>

3.使用Animated.timing来创建自动的动画

 componentDidMount() {
     this.fadeAnim();
 }
 fadeAnim() {
     Animated.timing(
        this.state.fadeAnim,////初始值
        {toValue: 1} //结束值
      ).start();//开始
  }

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务