react native 动画使用(二)

全局动画LayoutAnimation:
这个动画的作用于是全局的,使用起来非常简单。

let CustomLayoutAnimation = {
    duration: 800,//动画持续时间
    create: {//创建本页面时使用的动画
        type: LayoutAnimation.Types.easeInEaseOut  ,
        property: LayoutAnimation.Properties.scaleXY,
    },
    update: {//更新本页面时开启的动画
        type: LayoutAnimation.Types.easeInEaseOut,
    },
    delete: {//删除上一个页面时使用的动画
        type:LayoutAnimation.Types.easeInEaseOut,
        // springDamping: 0.6,
        property: LayoutAnimation.Properties.scaleXY,
    },
};

其中create和delete都要有这个property否则会报错。


layouterror.png

Type:spring linear easeInEaseOut easeIn easeOut keyboard
property:opacity scaleXY

使用时:

 constructor(props) {
        super(props);
   if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true)
        }
    }
   componentDidMount() {
     LayoutAnimation.configureNext(CustomLayoutAnimation);
    }
    componentWillUpdate(){
       LayoutAnimation.configureNext(CustomLayoutAnimation);
    }

效果图:

layoutgif.gif

详情:
https://github.com/facebook/react-native/blob/d4e7c8a0550891208284bd1d900bd9721d899f8f/Libraries/LayoutAnimation/LayoutAnimation.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,962评论 19 139
  • 一、LayoutAnimation主要用于视图位置、透明度等state改变之前调用,让其变化过程带上动画效果,不那...
    请叫我啊亮阅读 1,949评论 4 1
  • 平时进行 Native 开发的时候,为了更好的用户体验,我们会做一些动画效果,而在 React Native 中也...
    IAMCJ阅读 6,542评论 3 34
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,958评论 6 342
  • 很多你觉得天大的事,当你急切地向别人倾诉时,在别人眼中也是个小事,他最多不痛不痒呵呵地应和着。因为他不是你,...
    凌晨六点的空气阅读 108评论 0 2