React实现动画效果

class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),};
  }
  render(): ReactElement {
    return (
      <Animated.Image                         // 可选的基本组件类型: Image,Text,View
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,transform: [                        // `transform`是一个有序数组（动画按顺序执行）
            {scale: this.state.bounceValue},// 将`bounceValue`赋值给 `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值
    Animated.spring(                          // 可选的基本动画类型: spring,decay,timing
      this.state.bounceValue,150);">// 将`bounceValue`值动画化
      {
        toValue0.8,150);">// 将其值以动画的形式改到一个较小值
        friction// Bouncier spring
      }
    ).start();                                // 开始执行动画
  }
}

interpolation还支持任意的渐变函数，其中有很多已经在Easing类中定义了，包括二次、指数、贝塞尔等曲线以及step、bounce等方法。interpolation还支持限制输出区间outputRange。你可以通过设置extrapolate、extrapolateLeft或extrapolateRight属性来限制输出区间。默认值是extend（允许超出），不过你可以使用clamp选项来阻止输出值超过outputRange。

跟踪动态值

动画中所设的值还可以通过跟踪别的值得到。你只要把toValue设置成另一个动态值而不是一个普通数字就行了。比如我们可以用弹跳动画来实现聊天头像的闪动，又比如通过timing设置duration:0来实现快速的跟随。他们还可以使用插值来进行组合：

ValueXY是一个方便的处理2D交互的办法，譬如旋转或拖拽。它是一个简单的包含了两个Animated.Value实例的包装，然后提供了一系列辅助函数，使得ValueXY在许多时候可以替代Value来使用。比如在上面的代码片段中，leader和follower可以同时为valueXY类型，这样x和y的值都会被跟踪。

输入事件

Animated.event是Animated API中与输入有关的部分，允许手势或其它事件直接绑定到动态值上。它通过一个结构化的映射语法来完成，使得复杂事件对象中的值可以被正确的解开。第一层是一个数组，允许同时映射多个值，然后数组的每一个元素是一个嵌套的对象。在下面的例子里，你可以发现scrollX被映射到了event.nativeEvent.contentOffset.x(event通常是回调函数的第一个参数)，并且pan.x和pan.y分别映射到gestureState.dx和gestureState.dy（gestureState是传递给PanResponder回调函数的第二个参数）。

响应当前的动画值

你可能会注意到这里没有一个明显的方法来在动画的过程中读取当前的值——这是出于优化的角度考虑，有些值只有在原生代码运行阶段中才知道。如果你需要在JavaScript中响应当前的值，有两种可能的办法：

spring.stopAnimation(callback)会停止动画并且把最终的值作为参数传递给回调函数callback——这在处理手势动画的时候非常有用。
• spring.addListener(callback)会在动画的执行过程中持续异步调用callback回调函数，提供一个最近的值作为参数。这在用于触发状态切换的时候非常有用，譬如当用户拖拽一个东西靠近的时候弹出一个新的气泡选项。不过这个状态切换可能并不会十分灵敏，因为它不像许多连续手势操作（如旋转）那样在60fps下运行。

后续工作

如前面所述，我们计划继续优化Animated，以进一步提升性能。我们还想尝试一些声明式的手势响应和触发动画，譬如垂直或者水平的倾斜操作。

上面的API提供了一个强大的工具来简明、健壮、高效地组织各种各种不同的动画。你可以在UIExplorer/AnimationExample中看到更多的样例代码。不过还有些时候Animated并不能支持你想要的效果，下面的章节包含了一些其它的动画系统。

LayoutAnimation

LayoutAnimation允许你在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行。它常用来更新flexbox布局，因为它可以无需测量或者计算特定属性就能直接产生动画。尤其是当布局变化可能影响到父节点（譬如“查看更多”展开动画既增加父节点的尺寸又会将位于本行之下的所有行向下推动）时，如果不使用LayoutAnimation，可能就需要显式声明组件的坐标，才能使得所有受影响的组件能够同步运行动画。

注意尽管LayoutAnimation非常强大且有用，但它对动画本身的控制没有Animated或者其它动画库那样方便，所以如果你使用LayoutAnimation无法实现一个效果，那可能还是要考虑其他的方案。

另外，如果要在Android上使用LayoutAnimation，那么目前还需要在UIManager中启用：

运行这个例子

上面这个例子使用了一个预设值，不过你也可以自己配置你需要的动画。参见LayoutAnimation.js。

requestAnimationFrame

requestAnimationFrame是一个对浏览器标准API的兼容实现，你可能已经熟悉它了。它接受一个函数作为唯一的参数，并且在下一次重绘之前调用此函数。一些基于JavaScript的动画库高度依赖于这一API。通常你不必直接调用它——那些动画库会替你管理好帧的更新。

react-tween-state(不推荐，用Animated来替代)

react-tween-state是一个极小的库，正如它名字（tween：补间）表示的含义：它生成一个节点的状态的中间值，从一个开始值，结束于一个到达值。这意味着它会生成这两者之间的值，然后在每次requestAnimationFrame的时候修改状态。

在Wikipedia上对于补间动画(tweening)的定义：

“补间是在两个图像之间生成中间帧的过程，以使得第一个图像能够平滑的变化为第二个图像”。补间帧是指在关键帧之间用于创建过渡假象的图画。”

一个最基础的从一个值运动到另一个值的办法就是线性过渡：只需要将结束值减去开始值，然后除以动画总共需要经历的帧数，再在每一帧加到当前值上，一直到结束值位置。线性过渡有时候看起来怪异且不自然，所以react-tween-state提供了一系列常用的过渡函数，可以用于使你的动画更加自然。

这个库并未随React Native一起发布——要在你的工程中使用它，则需要先在你的工程目录下执行npm i react-tween-state --save来安装。

在上面的例子里我们变化的是透明度，但你可能也猜到了，我们能变化任何数值的值。可以参考它的说明文档来了解更多信息。

Rebound (不推荐 - 使用Animated来替代)

Rebound.js是一个安卓版Rebound的JavaScript移植版。它在概念上类似react-tween-state：你有一个起始值，然后定义一个结束值，然后Rebound会生成所有中间的值并用于你的动画。Rebound基于弹性物理模型，你不需要提供一个动画的持续时间，它会自动根据弹性系数、助力、当前值和结束值来计算。我们在React Native内部应用了Rebound，比如Navigator和WarningBox。

需要注意的是Rebound动画可以被中断——如果你在按下动画的过程中释放手指，它会从当前状态弹回初始值。