ReactNative动画浅入LayoutAnimted布局动画

LayoutAnimated API

总的来说，非常好使，相对于Animated来说使用不要太简单，不用处理各种插值，相比于没啥用的requestAnimationFrame帧动画，代码简洁，性能也好很多。

必要的开头

import { UIManager } from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

根据文档，android开发需要在入口添加这段代码，可以添加在任何LayoutAnimated代码运行之前，建议添加到index.js等入口文件中.

LayoutAnimation.configureNext(config, onAnimationDidEnd?, onAnimationDidFail?)

这个方法用于计划下一次布局所用到的方法，一般常见的会用于componentWIllUpdate方法中，在布局更新的时候启用动画，其中config是动画的主要配置，如下

名称	类型	必填	说明
config	object	是	如下
onAnimationDidEnd	function	否	动画结束后的回调
onAnimationDidFail	function	否	动画失败后的回调

config
duration	动画持续时间，单位是毫秒
create	配置创建新视图时的动画
update	配置呗更新的视图的动画

LayoutAnimation.configureNext({
      duration: 1000, //默认持续时间
      create: {   //创建时的动画
        type: LayoutAnimation.Types.spring,
        property: LayoutAnimation.Properties.scaleXY,
        springDamping: 0.6,
      },
      update: { //布局更新时的动画，这个是主要的
        type: LayoutAnimation.Types.spring, //类型，选择Types中的spring弹跳动画
        property: LayoutAnimation.Properties.scaleXY, //这个属性只能选择scaleXY缩放和opacity透明度，
        springDamping: 0.2,  //弹跳阻尼，数字小弹跳越大
      },
    });

以上就是一个布局发生变化后的一个弹跳动画案例，可是不会截gif就截图代替，看不到效果，可以自己代码试一下
目前layoutAnimated只支持opacity透明度和scaleXY缩放两种动画属性。

LayoutAnimation.Types 定义了LayoutAnimation 的动画类型，包括如下

类型	名称
spring	弹跳动画
linear	线性动画
easeInEaseOut	缓入缓出
easeIn	缓入
easeOut	缓出

以下是一个简短的案例，给予TypeScript的

import Touchable from '#/components/Touchable';
import React from 'react';
import {
  LayoutAnimation,
  Platform,
  StyleSheet,
  Text,
  UIManager,
  View,
} from 'react-native';

//必要的开头
if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

interface IState {
  boxPosition: string;
  boxXY: number;
}
interface IProps {}

class Release extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      boxPosition: 'left',
      boxXY: 150,
    };
  }

  //动画写入这里就不用重复写在各个方法内部了
  componentDidUpdate() {
    LayoutAnimation.configureNext({
      duration: 1000,
      create: {
        type: LayoutAnimation.Types.spring,
        property: LayoutAnimation.Properties.scaleXY,
        springDamping: 0.6,
      },
      update: {
        type: LayoutAnimation.Types.spring,
        property: LayoutAnimation.Properties.scaleXY,
        springDamping: 0.2,
      },
    });
  }

  toggleBox = () => {
    this.setState({
      boxPosition: this.state.boxPosition === 'left' ? 'right' : 'left',
    });
  };

  scaleBoxAdd = () => {
    this.setState({
      boxXY: this.state.boxXY + 80,
    });
  };
  scaleBoxReduce = () => {
    this.setState({
      boxXY: this.state.boxXY - 80,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Touchable style={styles.button} onPress={this.toggleBox}>
          <Text style={{color: '#fff'}}>布局动画弹跳</Text>
        </Touchable>
        <Touchable style={styles.button} onPress={this.scaleBoxAdd}>
          <Text style={{color: '#fff'}}>变大</Text>
        </Touchable>
        <Touchable style={styles.button} onPress={this.scaleBoxReduce}>
          <Text style={{color: '#fff'}}>缩小</Text>
        </Touchable>
        <View
          style={[
            styles.box,
            this.state.boxPosition === 'left' ? null : styles.moveRight,
            {width: this.state.boxXY, height: this.state.boxXY},
          ]}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
  button: {
    margin: 10,
    alignSelf: 'center',
    borderRadius: 30,
    backgroundColor: '#66cccc',
    height: 50,
    width: 180,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    alignSelf: 'flex-start',
    margin: 20,
    backgroundColor: '#6699cc',
    borderRadius: 20,
  },
  moveRight: {
    alignSelf: 'flex-end',
  },
});

export default Release;

LayoutAnimated相对来说较为简单，以上内容用作笔记加上案例尚且够用，帧动画由于性能过低所以就不研究了，