·一：动画组件：
Animated.Image
Animated.Text
Animated.View

二：动画函数：
1：Animated.timing() – 推动一个值按照一个过渡曲线而随时间变化。Easing
模块定义了很多缓冲曲线函数。
2：Animated.decay() – 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。
3：Animated.spring() – 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在 toValue
值更新的同时跟踪当前的速度状态，以确保动画连贯。

三：使用步骤
1：初始化动画属性值 Animated.value() Animated.valueXY()
2：将动画属性值关联到动画组件的属性上
3：选择执行动画的函数 timing decay spring

第一种普通动画：
效果图：

code:

 componentDidMount() {
    this.startAnimated();
  }

  startAnimated = () => {
    this.state.bounceValue.setValue(2);//每次循环的起始值
    Animated.timing(this.state.bounceValue, {
      toValue: 5,
      duration: 4000,
      easing: Easing.back(),
    }).start(() => this.startAnimated());//循环执行
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'red',
            transform: [{ scale: this.state.bounceValue }]
          }}
        />
      </View>
    );
  }

第二种手势动画：
效果图：

给动画添加手势并监听

将动画属性关联到动画组件上

监听打印的log
第三种：全局动画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否则会报错。

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);
    }

效果图：

一个好用的动画库：https://github.com/oblador/react-native-animatable