在app的开发中，流畅合理的动画能大大提高用户体验，android和ios原生都有对应的动画，同样的在rn中也有用于创建动画的api，就是animated。animated库使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。
我们想要文本，图片等可以进行动画，就需要使用animated进行封装！
所以创建动画组件有以下5种：
其中前4个使用的时候，只需使用
animated提供了3种动画类型，每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：
animated.decay()：以指定的初始速度开始变化，然后变化速度越来越慢直至停下。 animated.spring()：提供一个简单的弹性物理模型。 animated.timing()：驱动一个value使用easing函数随着时间的变化。这个类型我们平时用的最多！默认情况下，它采用了对称easeinout 曲线传达一个对象的逐渐加速到全速，最后逐渐减速到停止。animated的值类型有两种：
animatedvalue：单个值 animatedvaluexy：向量值，二维平面从字面上也能看出，animatedvalue就是一个单一的值，而animatedvaluexy则是xy两个方向的值！
举个例子，这里以timing()类型为例说一下动画的配置：
我要评论
animated.timing(
this.state.xposition,
{
tovalue: 100,
easing: easing.back,
duration: 2000,
}
).start();
1 2 3 4 5 6 7 8
这里提一下，有关animated基本上所有相关的api都在animatedimplementation.js这个文件中，路径在
node_modules/react-native/libraries/animated/src/animatedimplementation.js。我们可以看一下timing函数！
const timing = function(
value: animatedvalue | animatedvaluexy,
config: timinganimationconfig,
): compositeanimation {
......
}
1 2 3 4 5 6
这个函数接收两个参数，第一个参数value，就是上边值类型中所说的两个值类型，第一个参数config，是一个timinganimationconfig类型的参数，用来具体的动画配置！
比如例子中tovalue到达的值，duration动画持续时间（毫秒），默认值为500。easing设置easing函数类型！关于easing函数类型下边再说！
那么我们来具体看一下timinganimationconfig都可以设置哪些参数？
它的源码在timinganimation.js中
export type timinganimationconfig = animationconfig & {
tovalue: number | animatedvalue | {x: number, y: number} | animatedvaluexy,
easing: (value: number) => number,
duration: number,
delay: number,
};
1 2 3 4 5 6
我们可以看到它是在animationconfig的基础上又添加了4个属性，例子中写了3个，还有一个delay,从字面上都可以看出是来设置动画延迟执行的时间（毫秒），默认为0。！
下边来看一下animationconfig，它在animation.js中：
export type animationconfig = {
isinteraction: boolean,
usenativedriver: boolean,
oncomplete: endcallback,
iterations: number,
};
1 2 3 4 5 6
isinteraction：是否一起同步运行。这个属性可用于优化动画卡顿，将逻辑计算工作放在ui动画完成后执行，从而来保证动画的流畅度！这块我们放在后边ui优化的时候再具体深入的了解！可以参考interactionmanager!
usenativedriver：是否使用原生驱动，默认为false不开启！
oncomplete：设置动画完成时的回调
iterations：设置动画运行迭代次数
最后的最后，别忘了调用start()方法来启动动画！！！！
上边配置中easing用来设置一个easing函数类型，它的作用是来设置我们要动画改变的value要以什么状态来改变，是加速改变，还是减速改变，还是是弹性改变等等！
我们还是来看一下源码，它都可以设置哪些状态！
路径在`node_modules/react-native/libraries/animated/src/easing.js
还记得上边设置中easing属性要接收的类型吗？
easing: (value: number) => number，可以看出接收的是一个函数，将一个value传入，并返回一个改变后的value！而easing这个类就是干这个的，我们可以随便找一个看一下，比如例子中easing.back：
static back(s: number): (t: number) => number {
if (s === undefined) {
s = 1.70158;
}
return (t) => t * t * ((s + 1) * t - s);
}
1 2 3 4 5 6
我们可以看出easing这个类中的每一个函数都是(value: number) => number类型的，所以我们才可以easing : easing.back这样写！
也就是说官方给我们写好了一系列的easing 供我们选择使用，而不需要我们自己再写了！当然，如果我们想自定义value的变化形式的话，那就要自己写了！
那么我们想要使用哪一种变化类型，就去easing中选择就可以了，这里就不再一一列举了！
我们可以将多个动画效果组合在一起进行动画，rn提供了四种组合的动画的api：
animated.delay(time: number)animated.parallel(animations: array
config: parallelconfig,)
starts a number of animations at the same time.同时执行一组动画。
parallelconfig里边只有一个属性stoptogether，是否一起停止默认为true，如果任何一个动画被停止或中断了，组内所有其它的动画也会被停止。如果想要禁止自动停止，设置为false！
animated.sequence(animations: array我们可以使用加乘除以及取余等运算来把两个动画值合成为一个新的动画值。
animated.add():将两个动画值相加计算，得出一个新的动画值。 animated.pide():将两个动画值相除计算，得出一个新的动画值。 animated.modulo()：将两个动画值做取模（取余数）计算，得出一个新的动画值。 animated.multiply()；将两个动画值相乘计算，得出一个新的动画值。举个官网的例子，转换缩放比例（2x—>0.5x）：
const a = new animated.value(1);
const b = animated.pide(1, a);
animated.spring(a, {
tovalue: 2,
}).start();
1 2 3 4 5 6
animated.event是animated api中与输入有关的部分，允许手势或其它事件直接绑定到动态值上。它通过一个结构化的映射语法来完成，使得复杂事件对象中的值可以被正确的解开。
我们先来看一下event()方法的样子，源码同样在animatedimplementation.js中
const event = function(argmapping: array, config: eventconfig): any {
const animatedevent = new animatedevent(argmapping, config);
if (animatedevent.__isnative) {
return animatedevent;
} else {
return animatedevent.__gethandler();
}
};
1 2 3 4 5 6 7 8
可以看到event()函数接收两个参数，第一个参数接受一个映射的数组，对应的解开每个值，然后调用所有对应的输出的setvalue方法。第二个参数是可选的，接收一个eventconfig，我们看一下具体可以设置什么？源码在animatedevent.js中：
export type eventconfig = {
listener: function,
usenativedriver: boolean,
};
1 2 3 4
可以看到能够设置两个属性，第一个设置一个监听函数，第二个设置是否使用原生驱动。
举个例子，列表滑动：
onscroll={animated.event(
[{nativeevent: {contentoffset: {x: scrollx}}}],
// scrollx = e.nativeevent.contentoffset.x
{listener}// 可选的异步监听函数
)}
1 2 3 4 5
上边scrollx被映射到了event.nativeevent.contentoffset.x(event通常是panresponder回调函数的第一个参数)，而且设置了一个异步的监听函数！
关于panresponder手势系统，我们在之后再做深入了解！本篇文章只了解动画相关的内容！
用于驱动动画的标准值。一个animated.value可以用一种同步的方式驱动多个属性，但同时只能被一个行为所驱动。启用一个新的行为（譬如开始一个新的动画，或者运行setvalue）会停止任何之前的动作。
下边我只列表几个比较常用的方法：
我们先来看一下interpolate函数：
interpolate(config: interpolationconfigtype): animatedinterpolation {
return new animatedinterpolation(this, config);
}
1 2 3
可以看出它的全部实现都是在animatedinterpolation.js中！
函数接收一个interpolationconfigtype类型参数：
export type interpolationconfigtype = {
inputrange: array,
/* $flowfixme(>=0.38.0 site=react_native_fb,react_native_oss) - flow error
* detected during the deployment of v0.38.0. to see the error, remove this
* comment and run flow
*/
outputrange: array | array,
easing: (input: number) => number,
extrapolate: extrapolatetype,
extrapolateleft: extrapolatetype,
extrapolateright: extrapolatetype,
};
1 2 3 4 5 6 7 8 9 10 11 12
interpolate可以接受一个输入区间，然后将其映射到另一个的输出区间。
比如一个最简单的例子：
value.interpolate({
inputrange: [0, 1],
outputrange: [0, 100],
});
1 2 3 4
outputrange参数还可以接收字符串数组，常用于角度旋转时的转换！
value.interpolate({
inputrange: [0, 360],
outputrange: ['0deg', '360deg']
})
1 2 3 4
easing参数应该不陌生了吧，在上边已经提到过了，就是来设置变化的类型！
剩下的3个参数extrapolate、extrapolateleft或extrapolateright属性可以用来限制输出区间outputrange。我们在上边可以看到接收的值类型是extrapolatetype。
extrapolatetype的取值有3个：
type extrapolatetype = 'extend' | 'identity' | 'clamp';1
默认值是extend，表示允许超出。如果不允许超出输出区间，可以设置clamp。
(这里就摘取官网的翻译吧！)
你可能会注意到这里没有一个明显的方法来在动画的过程中读取当前的值——这是出于优化的角度考虑，有些值只有在原生代码运行阶段中才知道。如果你需要在javascript中响应当前的值，有两种可能的办法：
用来驱动2d动画的2d值，譬如滑动操作等。api和普通的animated.value几乎一样，只不过是个复合结构。它实际上包含两个普通的animated.value。
相关的api这里就不再详细说了，需要了解的可以去查看官方文档！
是否开启使用原生驱动，usenativedriver这个属性，我们在上边也已经提到过，但是它具体是干嘛的呢？
animated的api是可序列化的（即可转化为字符串表达以便通信或存储）。
通过启用原生驱动，我们在启动动画前就把其所有配置信息都发送到原生端，利用原生代码在ui线程执行动画，而不用每一帧都在两端间来回沟通。 如此一来，动画一开始就完全脱离了js线程，因此此时即便js线程被卡住，也不会影响到动画了。
所以需要开启使用原生驱动的话，很简单，配置usenativedriver:true即可！
需要注意的问题：
①动画值在不同的驱动方式之间是不能兼容的。因此如果你在某个动画中启用了原生驱动，那么所有和此动画依赖相同动画值的其他动画也必须启用原生驱动。
②还有官方文档中最后一句话，需要注意：
（翻译）本地驱动程序目前不支持animated所能做的一切。 主要限制是您只能对非布局属性进行动画处理：像transform和opacity这样的东西可以工作，但是flexbox和position属性不会。 使用animated.event时，只能使用直接事件而不冒泡事件。 这意味着它不适用于panresponder，但可以处理像scrollview＃onscroll这样的东西。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论