LayoutAnimation 布局动画

最新推荐文章于 2024-07-04 22:17:10 发布

王坡同学

最新推荐文章于 2024-07-04 22:17:10 发布

阅读量387

点赞数

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/WangPoTongXue/article/details/101423717

版权

ReactNative 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在React Native中利用LayoutAnimation库，在布局变化时创建视图的平滑动画效果。通过调用LayoutAnimation.configureNext()配置动画，然后更新状态以触发动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);//安卓启用

const defaultAnimation = {
    duration: 500,
    create: {
      duration: 300,
      type: LayoutAnimation.Types.easeInEaseOut,
      property: LayoutAnimation.Properties.opacity
    },
    update: {
      type: LayoutAnimation.Types.spring,//弹跳动画阻尼系数（配合 spring 使用）
      springDamping: 200
    }

};

type：类型定义在LayoutAnimation.Types中：
spring：弹跳
linear：线性
easeInEaseOut：缓入缓出
easeIn：缓入
easeOut：缓出

property：类型定义在LayoutAnimation.Properties中：
opacity：透明度
scaleXY：缩放

布局发生变化时,自动将视图运动到它们的新位置.调用LayoutAnimation.configureNext（），然后调用setState.



let animationConfig = defaultAnimation;

//用来创建 configureNext 所需的 config 参数的辅助函数。
animationConfig = LayoutAnimation.create(
      event.duration,
      LayoutAnimation.Types[event.easing],
      LayoutAnimation.Properties.opacity,
 );

 LayoutAnimation.configureNext(animationConfig);
this.setState({
            marginTop:JDDevice.height - this.NavHeight - this.textInputHeight  - this.keyboardSpace + 1,
   })

```'


  <Animated.View style = {{marginTop:this.state.marginTop} }>
            <View> </View>
   </Animated.View>