[React Native] 动画 · Animated

[React Native] 动画 · Animated

如果要在一个 React Native 应用中添加动画效果，首先考虑的就是官方提供的 Animated 。通过定义输入和输出的动画状态值，调用 start/stop 方法就可以执行起来，使用上可以说是非常友好方便。

Animated 动画组件有：

如果让某个界面元素拥有动画效果，那它应该使用如下的动画组件：

• Animated.View
• Animated.Text
• Animated.Image
• Animated.ScrollView
• Animated.FlatList
• Animated.SectionList

动画类型：

Animated　可以创建三种动画类型，直接调用就能创建一个动画对象，如 Animated.timing(…) ，动画对象可以调用 start() 启动。

• timing　先加速至全速，再逐渐减速渐停 (使用最多)
• spring　执行动画时会超出最终值然后弹回，适用于弹性的动态效果
• decay　以一定的初始速度开始变化，然后变化速度越来越慢直至停下

例如：

// 创建并启动一个 spring 类型的动画
Aimated.spring(this.state.value,{...动画配置}).start();

动画值：

动画执行过程中的变量不是普通的变量，只能是动画值，有两种类型：

• Animated.Value()　表示单个值
• Animated.ValueXY()　表示向量(矢量)值. （可用于改变 x,y 向的坐标）

实例：

this.state={
	dynamicHeight:new Animated.Value(0)  //初始化
}

this.state.dynamicHeight.setValue(10);  //重新设定动画值

计算动画值

一些时候所用的动画值并不是可以直接设定的，或者多个动画值存在一定关系，转换后使用更加方便，也就是在使用之前需要进行计算，这时就需要用到一些常用计算方法