前言

在APP的开发中，流畅合理的动画能大大提高用户体验，Android和iOS原生都有对应的动画系统，同样的在RN中也有用于创建动画的API，就是Animated。Animated库使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。

基本介绍

组件类型

我们想要文本，图片等可以进行动画，就需要使用Animated进行封装！
所以创建动画组件有以下5种：

Animated.View
Animated.Text
Animated.Image
Animated.ScrollView
封装自定义动画组件：Animated.createAnimatedComponent()

其中前4个使用的时候，只需使用<Animated.xxx>封装即可，之后与普通组件没有区别！第5个封装自定义的动画组件，一般来说使用的不多！

动画类型

Animated提供了3种动画类型，每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：

Animated.decay()：以指定的初始速度开始变化，然后变化速度越来越慢直至停下。
Animated.spring() ：提供一个简单的弹性物理模型。
Animated.timing() ：驱动一个Value使用 easing函数随着时间的变化。这个类型我们平时用的最多！默认情况下，它采用了对称ease inout曲线传达一个对象的逐渐加速到全速，最后逐渐减速到停止。

值类型

Animated的值类型有两种：

AnimatedValue：单个值
AnimatedValueXY：向量值，二维平面

从字面上也能看出，AnimatedValue就是一个单一的值，而AnimatedValueXY则是XY两个方向的值！

动画配置

举个例子，这里以timing()类型为例说一下动画的配置：

Animated.timing(
  this.state.xPosition,{
    tovalue: 100,easing: Easing.back,duration: 2000,}                              
).start();

这里提一下，有关Animated基本上所有相关的API都在AnimatedImplementation.js这个文件中，路径在
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js。我们可以看一下timing函数！

const timing = function( value: AnimatedValue | AnimatedValueXY,config: TimingAnimationConfig,): CompositeAnimation {
  ......
}

这个函数接收两个参数，第一个参数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,};

我们可以看到它是在AnimationConfig的基础上又添加了4个属性，例子中写了3个，还有一个delay,从字面上都可以看出是来设置动画延迟执行的时间（毫秒），默认为0。！
下边来看一下AnimationConfig，它在Animation.js中：

export type AnimationConfig = { isInteraction?: boolean,useNativeDriver?: boolean,onComplete?: ?EndCallback,iterations?: number,};

isInteraction：是否一起同步运行。这个属性可用于优化动画卡顿，将逻辑计算工作放在UI动画完成后执行，从而来保证动画的流畅度！这块我们放在后边UI优化的时候再具体深入的了解！可以参考InteractionManager!
useNativeDriver：是否使用原生驱动，默认为false不开启！
onComplete：设置动画完成时的回调
iterations：设置动画运行迭代次数

最后的最后，别忘了调用start()方法来启动动画！！！！

Easing函数

上边配置中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);
  }

我们可以看出Easing这个类中的每一个函数都是(value: number) => number类型的，所以我们才可以easing : Easing.back这样写！
也就是说官方给我们写好了一系列的easing 供我们选择使用，而不需要我们自己再写了！当然，如果我们想自定义value的变化形式的话，那就要自己写了！

那么我们想要使用哪一种变化类型，就去Easing中选择就可以了，这里就不再一一列举了！

组合动画

我们可以将多个动画效果组合在一起进行动画，RN提供了四种组合的动画的API：

Animated.delay(time: number)
starts an animation after a given delay.设置动画延迟执行。（相当于timing动画类型中的delay属性）。
Animated.parallel(animations: Array<CompositeAnimation>, config?: ?ParallelConfig,)
starts a number of animations at the same time.同时执行一组动画。

ParallelConfig里边只有一个属性stopTogether，是否一起停止默认为true，如果任何一个动画被停止或中断了，组内所有其它的动画也会被停止。如果想要禁止自动停止，设置为false！
Animated.sequence(animations: Array<CompositeAnimation>)
starts the animations in order,waiting for each to complete before starting the next.按照顺序执行动画，等到上一个动画完成之后才能启动下一个动画。
Animated.stagger(time: number, animations: Array<CompositeAnimation>)
starts animations in order and in parallel,but with successive delays.顺序且并行启动动画，但随着连续的延误。

合成动画值

我们可以使用加减乘除以及取余等运算来把两个动画值合成为一个新的动画值。
Animated.add()
Animated.divide()
Animated.modulo()
Animated.multiply()

React Native入门十四之动画1Animated

前言

基本介绍

组件类型

动画类型

值类型

动画配置

Easing函数

组合动画

合成动画值

手势和事件输入

AnimatedValue和AnimatedValueXY

AnimatedValue

插值函数interpolate

响应当前的动画值

AnimatedValueXY

相关推荐