RN动画Animated

React Native提供了两个互补的动画系统：用于全局的布局动画LayoutAnimation，和用于创建更精细的交互控制的动画Animated。
LayoutAnimation 是在布局发生变化时触发动画的接口，这意味着你需要通过修改布局（比如修改了组件的style、插入新组件）来触发动画。
Animated API

1. 动画值
   Value
   AnimatedValueXY
   我们可以操作的动画值有两种，一种是简单值，一种是二维矢量值。初始化一个动画值： new Animated.Value(0) 或 new Animated.ValueXY(0, 0)

2. 动画设置函数
   decay //衰减的。以一个初始速度开始，逐渐变慢到结束
   timing //用Easing方法操作动画值
   spring //弹簧的
   delay (特殊的timing) //延迟执行
   每个方法以不同的动画曲线控制动画值从初始值到最终值。上面的方法返回的对象可以start()或者stop()来控制动画开始或者结束。

3. 动画值生成函数
   add
   divide
   multiply
   modulo
   diffClamp
   可以对两个动画值进行加、除、乘、模等运算，生成一个新动画值。动画值的interpolate方法可以传入range映射输出（插值运算，更多关于插值需要看Interpolation.js文件）

4. 控制多个动画设置函数
   sequence //按顺序执行，执行完一个再执行下一个
   parallel //一组动画同时执行
   stagger //按顺序执行，一个动画开始后下一个动画在指定延迟执行
   loop
   上面方法控制的是"动画设置函数"（timing等）的开始和结束的方式。
   event
   手势（panning、scrolling等）或者其他 events 可以直接使用Animated.event方法映射动画值。
   createAnimatedComponent
   只有可动画的组件才能动画，createAnimatedComponent 方法可以让组件可动画，Animated 直接提供了下面4个可动画的组件，就是使用的这个方法包装的：
   Animated.Image
   Animated.Text
   Animated.View
   Animated.ScrollView

//透明度动画
import React, { Component } from “react”;
import { View, Text, Animated } from “react-native”;

//opacity:透明度动画
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
//初始化值
value: new Animated.Value(0)
};
}
componentDidMount() {
Animated.timing(this.state.value, { duration: 5000, toValue: 1 }).start();
}
render() {
return (

<Animated.Text
style={{
opacity: this.state.value,
fontSize: 30,
width: this.state.w,
height: this.state.h
}}
>
人望山，鱼窥荷
</Animated.Text>

);
}
}

//多种动画效果集合
控制多个动画
我们拿Animated.stagger()举例，控制一个动画开始后0.25秒开始下一个动画。

const animations = [ Animated.timing( this.state.skyAnimValue, { toValue: 1, }), Animated.timing( this.state.redAnimValue, { toValue: 1, }), Animated.timing( this.state.greenAnimValue, { toValue: 1, }) ]
Animated.stagger(250, animations).start()

注意：sequence、parallel、stagger、loop 方法控制的是"动画设置函数"的开始和结束的方式，所以传入的是一组对动画值操作后的对象，即timing等方法调用后的对象。

import React, { Component } from “react”;
import { Animated, View, Text } from “react-native”;

export default class Demo2 extends Component {
constructor(props) {
super(props);
this.state = {
value: new Animated.Value(0),
w: new Animated.Value(100),
h: new Animated.Value(100)
};
}
componentDidMount() {
const arr = [
Animated.timing(this.state.value, { toValue: 1, duration: 3000 }),
Animated.timing(this.state.w, { toValue: 600 }),
Animated.timing(this.state.h, { toValue: 600 })
];
Animated.stagger(1000, arr).start();
}
render() {
return (

<Animated.Text
style={{
opcity: this.state.value,
width: this.state.w,
height: this.state.h,
fontSize: 80,
backgroundColor: “#ddd”
}}
>
玻璃晴朗
</Animated.Text>

);
}
}