使用 React Native 并行动画

在移动开发中，动画是提高用户体验不可缺少的一个元素。在 React Native 中，动画API提供了一些现成的组件：Animated.View、 Animated.Text 和 Animated.Image 默认支持动画。动画 API 会调用 iOS 或者 Android 的本地代码来完成这些组件的位移、大小等动画，所以比 CSS3 动画流畅。

Animated API

大多数情况下，在 React Native 中创建动画是推荐使用 Animated API 的，其提供了三个主要方法用于创建动画：

Animated.timing()：推动一个值按照一个过渡曲线而随时间变化。Easing 模块定义了很多缓冲曲线函数。
Animated.decay()：推动一个值以一个初始的速度和一个衰减系数逐渐变为 0。
Animated.spring()：产生一个基于 Rebound 和 Origami 实现的 Spring 动画。它会在 toValue 值更新的同时跟踪当前的速度状态，以确保动画连贯。

并行动画

有时候我们需要一次新建多个动画，并让其同时运行。可以使用 Animated.parallel 方法同时启动一系列动画。比如要在屏幕上渲染一个欢迎界面，让界面同时显示两条欢迎信息和一个钱运登录按钮。可以创建三个独立的动画，然后对它们分别调用 Animated.start 方法，还有一种更有效的方法，使用 Animated.parallel 方法传入动画数组，然后同时运行动画。

代码实现

下面我们将创建一个欢迎界面，该界面会显示两条信息和一个登录按钮。代码清单如下所示：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Text,
  TouchableHighlight
} from 'react-native';

export default class RNAnimations extends Component {
  animatedTitle = new Animated.Value(-200);
  animatedSubtitle = new Animated.Value(600);
  animatedButton = new Animated.Value(800);

  componentDidMount() {
    this.animate();
  }
  animate = () => {
    Animated.parallel([
      Animated.timing(
        this.animatedTitle,
        {
          toValue: 200,
          duration: 800,
        }
      ),
      Animated.timing(
        this.animatedSubtitle,
        {
          toValue: 0,
          duration: 1400,
          delay: 800,
        }
      ),
      Animated.timing(
        this.animatedButton,
        {
          toValue: 0,
          duration: 1000,
          delay: 2200,
        }
      )
    ]).start();
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.Text
          style={[styles.title, { marginTop: this.animatedTitle }]}
        >
          欢迎</Animated.Text>
        <Animated.Text
          style={[styles.subTitle, { marginLeft: this.animatedSubtitle }]}
        >
          一起开启新的征程吧!
      </Animated.Text>
        <Animated.View style={{ marginTop: this.animatedButton }}>
          <TouchableHighlight>
            <View style={styles.button}>
              <Text style={styles.text}>注册</Text>
            </View>
          </TouchableHighlight>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 16
  },
  title: {
    textAlign: 'center',
    fontSize: 24,
    marginBottom: 12,
  },
  subTitle: {
    width: '100%',
    marginBottom: 24,
    textAlign: 'center',
    fontSize: 18,
    opacity: .8,
  },
  button: {
    backgroundColor: '#008888',
    alignItems: 'center',
    padding: 10
  },
  text: {
    color: '#fff',
    fontSize: 20
  }
});

上述示例中，因为使用了 Animated.parallel，所以三个动画会同时开始。在配置中添加了延迟属性 delay，以控制其中两个动画的开始时间。

最终效果如下图所示：