分类
Javascript Mobile

使用React Native序列动画

序列(sequence)动画是一系列依次出现的动画,每个动画在开始前需等待上一个动画完成,sequence可以用来创建动画,与parallel类似,sequence也包含一个动画数组:

Animated.sequence([
  animation1,
  animation2,
  animation3
]).start()

下面将创建一个序列,将字符大家好,投放到屏幕中,投放间隔为500毫秒。代码清单如下:

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

export default class RNAnimations extends Component {
  componentDidMount() {
    this.animate();
  }
  first = new Animated.Value(-30);
  second = new Animated.Value(-30);
  third = new Animated.Value(-30);
  animate = () => {
    const createAnimation = (value) => {
      return Animated.timing(
        value, {
        toValue: 290,
        duration: 500
      })
    }
    Animated.sequence([
      createAnimation(this.first),
      createAnimation(this.second),
      createAnimation(this.third)
    ]).start()
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.first }]}
        >
          大
        </Animated.Text>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.second }]}
        >
          家
        </Animated.Text>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.third }]}>
          好
        </Animated.Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'row',
  },
  text: {
    marginHorizontal: 20,
    fontSize: 26
  }
});

该示例使用-30为起始动画值,因为该数值是文本元素的marginTop值。文本从屏幕顶部拉出,并在动画开始之前隐藏在屏幕顶部函数,createAnimation函数救灾接收了一个动画值作为参数。最终效果如图所示:

使用(Chrome/Edge)在线运行

😀Happy animation!