React Native LayoutAnimation动画

在React Native中，LayoutAnimation用于在页面布局发生改变时，添加动画效果。
LayoutAnimation使用简单，要实现动画效果只需要在setState()前添加LayoutAnimation动画方法：

//添加一张图片    _addImg() {        //LayoutAnimation.easeInEaseOut();//在setState()前，添加LayoutAnimation动画方法        this.setState({views: [...this.state.views, {}]});//往数组中加入一个空对象    }    //移除最后一张图片    _removeImg() {        //LayoutAnimation.easeInEaseOut();//在setState()前，添加LayoutAnimation动画方法        this.setState({views: this.state.views.slice(0, -1)});//移除views数组中最后一个对象    }

或统一写在componentWillUpdate()方法中，每当页面中元素状态改变的时候都会调用这个方法。

//布局更新时执行    componentWillUpdate() {        LayoutAnimation.easeInEaseOut();//每次组件更新前，执行LayoutAnimation动画    }

LayoutAnimation支持的动画类型：

• caseInEaseOut
• linear
• spring

我们也可以自定义动画效果：

//自定义动画var CustomLayoutAnimation={    duration:800,//动画执行的时间    create:{//布局创建时的动画        type:LayoutAnimation.Types.spring,//动画类型(主要涉及:spring,linear,easeInEaseOut,easeIn,easeOut,keyboard)        property:LayoutAnimation.Properties.scaleXY,//动画作用的元素属性(主要涉及:opacity,scaleXY)    },    update:{//布局更新时的动画        type:LayoutAnimation.Types.linear,//动画类型        property:LayoutAnimation.Properties.opacity,//动画作用的元素属性    }};

通过LayoutAnimation.configureNext()方法，我们就可以执行我们自定义的动画

//布局更新时执行    componentWillUpdate() {  LayoutAnimation.configureNext(CustomLayoutAnimation);//执行自定义LayoutAnimation动画    }

完整代码如下：

/** * Created by gyg on 2017/5/17. */'use strict'import React, {Component} from 'react';import {    StyleSheet,    View,    Image,    Text,    TouchableHighlight,    LayoutAnimation,    Platform,    UIManager,}from 'react-native';//自定义动画var CustomLayoutAnimation={    duration:800,//动画执行的时间 毫秒    create:{//布局创建时的动画        type:LayoutAnimation.Types.spring,//动画类型(主要涉及:spring,linear,easeInEaseOut,easeIn,easeOut,keyboard)        property:LayoutAnimation.Properties.scaleXY,//动画作用的元素属性(主要涉及:opacity,scaleXY)    },    update:{//布局更新时的动画        type:LayoutAnimation.Types.linear,//动画类型        property:LayoutAnimation.Properties.opacity,//动画作用的元素属性    }};export default class LayoutAnimationDemo extends Component {    // 构造    constructor(props) {        super(props);        if (Platform.OS == 'android') {//android平台需要开启允许LayoutAnimation ios默认开启            UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);        }        // 初始状态        this.state = {            views: []        };    }    //布局更新时执行    componentWillUpdate() {        LayoutAnimation.easeInEaseOut();//每次组件更新前，执行LayoutAnimation动画        //LayoutAnimation.configureNext(CustomLayoutAnimation);//执行自定义LayoutAnimation动画    }    //添加一张图片    _addImg() {        //LayoutAnimation.easeInEaseOut();//在setState()前，添加LayoutAnimation动画方法        this.setState({views: [...this.state.views, {}]});//往数组中加入一个空对象    }    //移除最后一张图片    _removeImg() {        //LayoutAnimation.easeInEaseOut();//在setState()前，添加LayoutAnimation动画方法        this.setState({views: this.state.views.slice(0, -1)});//移除views数组中最后一个对象    }    render() {        const views = this.state.views.map((view, i)=> {            return (                <Image key={i} source={require('../../res/girl.jpg')} style={styles.image}                />            );        });//将this.state.views数组中的每个元素映射成一个<Image/>组件        return (            <View style={styles.container}>                <View style={styles.buttonLinear}>                    <TouchableHighlight style={styles.button} underlayColor={"#eeeeee"}                                        onPress={this._addImg.bind(this)}>                        <Text style={styles.buttonText}>add</Text>                    </TouchableHighlight>                    <TouchableHighlight style={styles.button} underlayColor={"#eeeeee"}                                        onPress={this._removeImg.bind(this)}>                        <Text style={styles.buttonText}>remove</Text>                    </TouchableHighlight>                </View>                <View style={styles.viewContainer}>                    {views}                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: 'white',    },    buttonLinear: {        flexDirection: 'row',        marginTop: 20,        justifyContent: 'space-around'    },    button: {        borderRadius: 5,        backgroundColor: "#eeeeee",        paddingLeft: 20,        paddingRight: 20,        paddingTop: 10,        paddingBottom: 10,    },    buttonText: {        fontSize: 16,    },    image: {        width: 50,        height: 50,        margin: 1,    },    viewContainer: {        flexDirection: 'row',        flexWrap: 'wrap',        marginTop: 30,    }})

系统动画效果：

可以看出，原生动画是改变的元素的opacity属性,有一个淡入淡出的效果
自定义动画效果：

自定义动画改变的是元素的scaleXY属性，有一个缩放的效果。