参考文档 ：动画概述、动画API、动画缓动函数、interactionmanager
文档其实已经比较详细了，这里整理一下，做个笔记，也算加深一下自己的印象。
定义
所谓动画，就是 UI 上的变化，而在 RN 中，UI 对应的就是 style，那么动画就是要顺滑的改变 style 某个属性的值，就以 opacity 来作为解释吧
如果想要实现透明度的不断变化，比如可以用 state 中定义的属性作为 style.opacity 的值，后续通过 requestAnimationFrame 来不停修改 state 值，可以做到，但性能低下，这就是 RN Animated 存在的意义
const opacity = new Animated.Value(0);
<Animated.View style={{
opacity: opacity
}}/>
这就好了，opacity 的属性值为一个 Animated.Value，当需要修改透明度的了，不需要改 state， 而是重置
Animated.Value 的值就行了，他会实时传导给 View 的 style.opacity
动起来
如何修改 Animated.Value 的值
// 定义 opacity 的值如何变化
const an = Animated.timing(opacity, {
toValue: 1, // 最终变为 1
delay: 1000, // 延迟 1 秒后开始变换（在此期间，opacity 值仍为 0）
duration: 1000, // 用 1 秒的时间去变换（在 1 秒内，opacity 由 0 -> 1）
easing: Easing.back(), // 变换过程不一定是均匀变换，可指明变换函数
useNativeDriver:false, // 是否启用原生驱动
isInteraction:true, // 是否在InteractionManager的队列中注册，后面会提到
})
// 开始动画 (可选：设置执行完成的回调)
an.start([callback]);
// 停下动画
an.stop()
说下配置项中的三个参数
const a = new Animated.Value(0);
Animated.timing(opacity, {
toValue: a,
useNativeDriver:false,
isInteraction:true,
})
toValue
可以指定为其他 Animated.Value 动态值，而不是固定值
useNativeDriver
启用原生使用ui线程，可提供动画流畅度，但有限制
1）启用了原生，那么和该动画相关的其他动画也必须是原生
2）不支持用在 style 的盒模型属性上，启用原生驱动，最安全的就是 opacity 和 transform
isInteraction
RN 有一个 interactionmanager API，可执行一些耗时任务，这些任务会在动画执行完毕后再启动，通过该属性来指明是否支持该 API， 默认为 true，即动画完事再执行任务，设为 false 则不然
除了 Animated.timing，还有两个已经预置了 easing 效果的方法：Animated.decay、Animated.spring
合成
假设我们要做一个，由透明逐渐显示、且宽度从 0 变到 100 的 view，透明度就是上面的办法了，那么宽度呢，我们可以重新定义一个
const width = new Animated.Value(0);
const w = Animated.timing(width, {
toValue: 100,
...... // 其他配置，与 opacity 保持一致
})
w.start()
这样搞，配置就要写两遍，当然，也可以把配置提出来用一个变量来定义，这样写一遍就好了，但这样，要同时调用两个动画的 start() ，两个执行可能不完全同步，这就是合成的意义了，可以这样写
const opacity = new Animated.Value(0);
const width = Animated.multiply(opacity, 100);
<View style={{
opacity: opacity,
width:width
}}/>
Animated.timing(opacity, {
...
}).start()
使用合成，只需要启动 opacity 就好了，width 的值会自动跟着 opacity 变化，妙啊~
RN 提供了 Animated.add (加)、Animated.subtract (减)、Animated.multiply(乘)、Animated.divide(除)、Animated.modulo(取余) 五个合成方法
插值
上面的合成函数虽然方便，但实际操作中远不止加减乘除这么简单，那么能不能自定义合成函数呢？答案是不太能，因为自定义函数意味着，动画跑起来之后，还要和 js 交互，来拿计算结果，在性能上是不能接受的，卡成幻灯片的动画还叫动画吗，也许未来某一天，RN 可以静态编译 js 无状态纯函数就可以了，那在那一天到之前，插值是当前的选择
const opacity = new Animated.Value(0);
const width = opacity.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 20, 100]
});
<View style={{
opacity: opacity,
width:width
}}/>
Animated.timing(opacity, {
...
}).start()
插值通过 interpolate 将输入 inputRange 映射为 outputRange，可分段映射，这样灵活性大大提高
组合
产品改需求了，先逐渐显示，然后再逐渐变宽。好简单，在 opacity 的 start() 加回调 -> 启动 width 的 start()；可以，但如果有 N 个连续动画，回调恐怕会吐血，这就需要组合动画了
Animated.sequence 按顺序执行一系列动画
Animated.delay 在顺序执行动画时，可以让两个动画衔接时，延迟一会
Animated.sequence([
Animated.timing(opacity, {
...
})
Animated.delay(1000); // 有点像 sleep
Animated.timing(width, {
...
})
]).start()
假如希望 opacity 和 width 同时执行，但动画过程不是一个步调，使用不同的 easing 或 duraition
Animated.parallel 同时执行一系列动画
Animated.stagger 延迟启动一系列动画，基本等同于 setTimeout(Animated.parallel)
Animated.parallel([
Animated.timing(opacity, {
...
})
Animated.timing(width, {
...
})
]).start()
Animated.stagger(1000, [
Animated.timing(opacity, {
...
})
Animated.timing(width, {
...
})
]).start()
Animated.loop 循环执行动画
可以在 start 回调中再启动自身，这样也能搞一个循环动画，但这样的话，每次结束，是 ui 线程调用 js， 再唤起 ui，周而复始，不如直接 loop 性能来的好
Animated.loop(Animated.timing(opacity, {
...
isInteraction:false
}), {
iterations:-1
})
- 函数的第二个参数是设置循环次数的，可省略
- 建议配置 isInteraction=false 是因为这是循环动画，会导致其他任务永远无法执行了
交互
以上都是提前设计好动画，然后执行，在实际使用中动画，其实就是 style 可能是需要根据用户操作来进行变动的，比如这样的组件 react-native-parallax-scroll-view，这就需要用到 Animated.event 函数了
// argMapping 是映射配置
// config 接受两个参数, js 异步回调函数 和 是否启用原生驱动
Animated.event(argMapping, {
listener:Function,
useNativeDriver:true
})
需要先强调一件事，否则看 argMapping 恐怕会有点懵
Animated 的本质是提供输入值，比如上面通过 初始value 和 配置toValue 明确提供一个区间值作为输入值，亦或通过 RN 提供的合成或插值将区间值进行调整，说白了，就是不希望 js 内进行任何计算，要么提供明确的值，要么使用 RN 的计算手段。
而交互呢，其实就是将 RN 提供的值，再作为输入值，还是不让 js 参合，虽然提供了 listener 回调，但也只是让你知道当前执行到哪了，是不能进行修改的，并且这个回调的值可能还有延迟。argMapping 就是将 RN 提供的输出值 映射 到一个动画上作为输入值。
原生交互，也就是手势交互，只有一个 panresponder，还有就是 scrollview 二次封装的 onScroll，当然，也可能有其他三方组件再次封装，但原理都是一样的
以 panresponder 举例，绑定监听函数会返回两个参数，具体看官网
onPanResponderMove: (nativeEvent, gestureState) => {}
gestureState = {
....
dx - 从触摸操作开始时的累计横向路程
dy - 从触摸操作开始时的累计纵向路程
}
比如我们现在要将 dx 映射到某个 Animated.value
const x = new Animated.Value(0);
onPanResponderMove: Animated.event([
null, { dx: x }
])
嗯，这就完事了， event([]) 中的 [] 会传递回调函数参数，第一个不用，直接 null ，然后映射第二个，就是 gestureState.dx -> x，当然，你可以从 gestureState 找其他参数进行映射
为加深理解，再看看 onScroll， 根据介绍，其函数原型是这样的
onScroll : (event) => {}
event = {
nativeEvent: {
contentInset: { bottom, left, right, top },
contentOffset: { x, y },
contentSize: { height, width },
layoutMeasurement: { height, width },
zoomScale
}
}
比如要映射 Y 轴滚动距离
const dy = new Animated.Value(0);
onScroll={Animated.event(
[{ nativeEvent: {
contentOffset: { y: dy }
}}]
)}
嗯，就是这样，参数对参数
响应
输入值 虽然无法自定义函数进行计算，但好歹提供了 合成 和 插值的办法，输出值，就是当前的 Animated.Value 实际值，有么有办法监听？
RN 提供了一些方法，具体可参见 animatedvalue、animatedvaluexy；使用方法比较简单
const an = new Animated.Value(0);
an.addListener(v => {
});
// 也可直接设置值
an.setValue(2)
这种响应是不建议直接参与动画的，适合作为旁观者静静看着动画，当达到某一个符合条件的值，触发一些其他操作。
收尾
最后再加上 layoutanimation 便是 RN动画 的全部内容了，该 API 是做整体动画的，不是特别常用，就没展开，需要的话可以自行查阅。
本篇文档都是使用 RN 中文网的链接，该网站是第三方进行翻译的，质量不错，但相对于 官网 还是有所不足，比如上面说的 animatedvalue API，由于官网上没有相关入口，所以中文网也没有，但在官网顶部的 search 中是可以搜索到的，中文网则搜索不到 :) 英文水平跟得上，直接看官方文档，更新会比较及时
最后，就是 github 上的 react-native-website ，也就是官网的的托管库，其实也是一个不错的寻找文档的地方。
最最后，这里还有一个不错的学习资料：https://future-challenger.gitbooks.io/react-native-animation/content/
最最最后，官方推荐的导航组件 react-navigation 使用一个第三方动画库 react-native-reanimated，该库更为强大，这里就不再介绍了，有兴趣的朋友可以研究一下
