React Native学习实践：动画初探之加载动画！

学习和实践react已经有一段时间了，在经历了从最初的彷徨到解决痛点时的兴奋，再到不断实践后遭遇问题时的苦闷，确实被这一种新的思维方式和开发模式所折服，但react也不是万能的，在很多场景下滥用反而会适得其反，这里不展开讨论。

有了react的实践经验，结合之前自己的一点ios开发经验，决定继续冒险，开始react-native学习和实践，目前主要是从常规的native功能入手，逐步用react-native实现，基础知识如开发环境搭建、调试工具等官方文档有很清楚的指引，不再赘述，这里主要是想把实际学习实践中遇到的坑或者有意思的经历记录下来，为广大react-native初学者提供一点参考。O(∩_∩)O~

话不多说，进入正题，今天要实现的是一个加载动画，效果如下：

很简单一个动画，不是么？用native实现实在是小菜一碟，现在我们试着用RN来实现它！

先将动画的视图结构搭建出来，这个比较简单，就是4个会变形的View顺序排列：

<View style={ styles.square}>

     <Animated.View  style={[styles.line,{ height:this.state.fV}]}>

      <Animated.View style={[styles.line,{ height:this.state.sV}]}>

      <Animated.View style={[styles.line,{ height:this.state.tV}]}>

      <Animated.View style={[styles.line,{ height:this.state.foV}]}>

  </View>

这里的视图结构很普通，只不过在RN中，需要施加动画的视图，都不能是普通的View，而是Animated.View，包括施加动画的图片，也应该是Animated.Image，需要注意。

RN继承了react的核心思想，基于虚拟DOM和数据驱动的模式，用state来管理视图层，所以RN的动画和react的动画类似，都是通过改变state从而执行render进行视图重绘，展现动画。

毫无疑问，先从Animated库下手，这是facebook官方提供的专门用于实现动画的库，它比较强大，集成了多种常见的动画形式，正如官方文档写道:

Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

它专注于输入和输出之间的对应关系，其间是可以配置的各种变形，通过简单的开始和停止方法来控制基于时间的动画。

所以使用这个库的时候，需要清楚知道动画的输入值，不过这并不代表需要知道每一个时刻动画的精确属性值，因为这是一种插值动画，Animated只需要知道初始值和结束值，它会将所有中间值动态计算出来运用到动画中，这有点类似于CSS3中的关键帧动画。它提供了spring、decay、timing三种动画方式，其实这也就是三种不同的差值方式，指定相同的初始值和结束值，它们会以不同的函数计算中间值并运用到动画中，最终输出的就是三种不同的动画，比如官方给出的示例：

class Playground extends React.Component {

  constructor(props: any) {

    super(props);

    this.state = {

      bounceValue: new Animated.Value(0),//这里设定了动画的输入初始值，注意不是数字0

    };

  }

  render(): ReactElement {

    return