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