React Native开发之动画(Animations)

博主这个系列的文章

• React Native开发之IDE（Atom+Nuclide）
• React Native开发之FlexBox代码＋图解
• React Native的Navigator详解

另外，我在Github上建立了一个仓库来搜集优秀的React Native库和优秀的博客等

ReactNativeMaterials

---

资料

• 官方关于动画的介绍
• 官方给出的复杂动画的示例
• 开源项目react-native-animatable
• React Native Animation Book
• 可以用在实际项目里的：react-motion

---

概述

目前，React Native的版本是0.28,主要的动画分为两大类

• LayoutAnimation 用来实现布局切换的动画
• Animated 更加精确的交互式的动画

目前React native的release速度还是比较快的，每隔2周左右就release一次。

---

准备工作

本文默认读者已经

1. 安装好了React Native
2. 安装好了IDE（本文使用Atom＋Nuclide），如果没有安装过，可以参照最上面的链接进行安装
3. 使用react-native init Demo --verbose初始化了一个Demo项目

---

一个简单的动画

一个最基本的Animated创建过程如下

1. 创建Animated.Value，设置初始值，比如一个视图的opacity属性，最开始设置Animated.Value(0),来表示动画的开始时候，视图是全透明的。
2. AnimatedValue绑定到Style的可动画属性，比如透明度，{opacity: this.state.fadeAnim}
3. 使用Animated.timing来创建自动的动画,或者使用Animated.event来根据手势，触摸，Scroll的动态更新动画的状态（本文会侧重讲解Animated.timing）
4. 调用Animated.timeing.start()开始动画

基于上述的原理，我们来实现第一个动画。

创建一个Demo工程的时候，运行后，模拟器截图应该是酱紫的。

然后，只保留第一行文字，然后我们给这个默认的视图创建fade in动画，效果如下

代码

class Demo extends React.Component {
   
  state: { //可以不写，我这里写是为了去除flow警告
    fadeAnim: Object,
  };
  constructor(props) {
     super(props);
     this.state = {
         fadeAnim: new Animated.Value(0), //设置初始值
     };
   }
   componentDidMount() {
   Animated.timing(
     this.state.fadeAnim,//初始值
     {toValue: 1}//结束值
   ).start();//开始
   }
  render() {
    return (
      <View style={styles.container}>
      <Animated.Text style={
  {opacity: this.state.fadeAnim}}>//绑定到属性
          Welcome to React Native!
      </Animated.Text>
      </View>
    );
  }
}

所以说，简单的动画就是用Animated.Value指定初始值，然后在Animated.timing中设置结束值，其他的交给React native让它自动创建，我们只需要调用start开始动画即可。

在当前版本0.27种，可动画的视图包括

• View
• Text
• Image
• createAnimatedComponent(自定义)

---

Animated详解

方法

• static decay(value, config) 阻尼，将一个值根据阻尼系数动画到 0
• static timing(value, config 根据时间函数来处理，常见的比如线性，加速开始减速结束等等，支持自定义时间函数
• static spring(value, config) 弹性动画
• static add(a, b) 将两个Animated.value相加，返回一个新的
• static multiply(a, b) 将两个Animated.value相乘，返回一个新的
• static modulo(a, modulus)，将a对modulus取余,类似操作符%
• static delay(time)延迟一段时间
• static sequence(animations) 依次开始一组动画，后一个在前一个结束后才会开始，如果其中一个动画中途停止，则整个动画组停止
• static parallel(animations, config?),同时开始一组动画，默认一个动画中途停止，则全都停止。可以通过设置stopTogether来重写这一特性
• static stagger(time, animations),一组动画可以同时执行，但是会按照延迟依次开始
• static event(argMapping, config?),利用手势，Scroll来手动控制动画的状态
• static createAnimatedComponent(Component),自定义的让某一个Component支持动画

属性

• Value,类型是AnimatedValue,驱动基本动画
• AnimatedValueXY,类型是AnimatedValueXY，驱动二维动画

AnimatedValue类型

一个AnimatedValue一次可以驱动多个可动画属性，但是一个AnimatedValue一次只能由一个机制驱动。比如，一个Value可以同时动画View的透明度和位置，但是一个Value一次只能采用线性时间函数