[React Native] 动画

[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);  //重新设定动画值

计算动画值

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

例如: 一个长宽比为 3：2 的图片，要实现放大动画，为保持变化过程中的长宽比不变，这时就可以用一个公因数，则宽度 = 公因数乘以 2 ，长度 = 公因数乘以 3 ，在 state 中变化的动画值就是这个公因数，实际使用的动画值就是通过乘法 Animated.multiply() 得到的动画值。

// - 宽度计算 -
// factor 是 state 中的变量 ，乘以 2 得到真实动画值后再将真实动画值设置到属性或样式上
const realAnimatedWidth = Animated.multiply(this.state.factor,new Animated.Value(2));

可用的计算方法：

Animated.add() 　加
Animated.subtract()　减
Animated.multiply()　乘
Animated.divide()　除
Animated.modulo()　模（取余）

组合类型

当多个动画需要需要以一定规律进行（多个动画值变动）的时候，就需要用到组合动画，Animated 提供了几种方法将动画按照一定方式组合：

Animated.delay(time) 　按照给定延迟后执行动画
Animated.parallel(animations, config?)　同时执行多个动画
Animated.sequence(animations)　顺序执行，一个动画结束后开始执行下一个
Animated.stagger(time, animations)　按照给定延迟顺序启动多个动画，可能并行重叠。
loop(animation, config?) 　无限循环一个指定动画

举例：

//并行两个动画   同时进行一个 timing 动画和一个 spring 动画
Animated.parallel([Animated.timing(...),Animated.spring(...)
]).start()

插值

根据一个动画值的变化范围，获取另一个动画值的范围，需要使用插值。插值函数 interpolate 可以将输入范围映射到输出范围，一般是使用线性插值，但也可以指定 easing 函数 [查看 Easing 介绍]。

对于一些属性值是字符串的变量，比如 rotate ，从 ‘0deg’ 到 ‘180deg’ ，也应该使用插值来获取变化范围。

AnimatdValue.interpolate(config)

例如：

// Y 轴上的偏移量根据 fadeAnim 的值变化
// fadeAnim -> [0,1]    translateY -> [150,0]
style={{opacity: this.state.fadeAnim, // Binds directlytransform: [{translateY: this.state.fadeAnim.interpolate({inputRange: [0, 1],outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0}),}],}}

一个完整的简单动画可以分如下几步实现：

定义动画值变量并初始化
定义动画配置和执行方法
将动画值绑定到组件上，用于改变属性或样式
触发动画执行的事件或操作

对应于下面的例子来看，会更容易理解上述每一步。

[ 动画1 -动画值控制高度] 点击展开视图的动画，效果如下：

通过将 Animated.View 的高度设置成动画值实现。以上三步均在代码中标出

export default class AnimatedView extends PureComponent {constructor(props) {super(props);this.state = {dynamicHeight: new Animated.Value(0),  //1 - 构造方法中定义 dynamicHeight 动画变量}}startViewAnimation = () => {   //2 - 配置动画和定义执行方法let targetHeight = 80;if (this.state.dynamicHeight._value === 80) {     //根据高度判断是否已展开targetHeight = 0;           //已展开的话，则需要将 View 收起，高度回到初始值 0}Animated.spring(           //定义弹性动画this.state.dynamicHeight, //改变的动画变量{toValue: targetHeight,  //目标值，也就是动画值变化后的最终值duration: 300,            //动画持续时长}).start();}render() {return (<View style={{flex: 1}}><View style={{width: 200, position: 'absolute', top: 30}}><View><TouchableOpacityonPress={this.startViewAnimation}      // 4 - 触发动画执行的点击事件style={styles.button}><Text>点击展开</Text></TouchableOpacity></View><Animated.Viewstyle={{backgroundColor: '#eee', justifyContent: 'space-around',height: this.state.dynamicHeight}}   //3 - 将高度是设为动画值，即用动画值改变 style （height）></Animated.View></View></View>);}
}

[ 动画2 - 动画值插值转换] 点击跳动的心形图：

动画值 imageSize 从 0 到 1，映射成对应的实际图片大小，再设置到 Animated.Image 的宽高样式上。

export default class HeartView extends PureComponent {constructor(props) {super(props);this.state = {imageSize: new Animated.Value(0), //动画初始值为 0，目标值为 1 。会经过插值转换后应用到 Animated.Image上}}startImageAnimation = () => {//动画开始前先将初始值设为0，否则第一次执行后this.state.imageSize的动画值一直是 1, 不再有效果this.state.imageSize.setValue(0) Animated.spring(this.state.imageSize,{toValue: 1,duration: 2000,}).start();}render() {//动画值从0-1，对其进行插值转换 ，映射成实际的图片大小//再将实际的图片大小设置给 Animated.Image 的样式const imageSize = this.state.imageSize.interpolate({   inputRange: [0, 0.5, 1],outputRange: [30, 40, 30]});return (<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><TouchableOpacityonPress={this.startImageAnimation}><Animated.Image source={ICON_HEART} style={{width: imageSize, height: imageSize,  //应用到 Animated.Image 上tintColor: '#dc3132'}}/></TouchableOpacity></View>);}
}

这些都是动画 Animated 的基础使用，另外还有关于 setNativeProps 和 LayoutAnimation 的部分另做总结。

欢迎关注公众号 Export ，发现更多内容。