React Native 动画之 Animated.Sequen

Animated提供了三种动画类型。每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：

• Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。
• Animated.spring()提供了一个简单的弹簧物理模型.
• Animated.timing()使用easing 函数让数值随时间动起来。

动画还可以使用组合函数以复杂的方式进行组合：

• Animated.delay()在给定延迟后开始动画。
• Animated.parallel()同时启动多个动画。
• Animated.sequence()按顺序启动动画，等待每一个动画完成后再开始下一个动画。
• Animated.stagger()按照给定的延时间隔，顺序并行的启动动画。

Animated.Sequence()

效果图

animated04.jpg

实例代码

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

const arr = [];
for (var i = 0; i < 50; i++) { 
  arr.push(i)
}
export default class App extends Component {
  constructor(props) {  //构造函数
    super(props);
    this.animatedValue = [];
    arr.forEach((value) => {
      this.animatedValue[value] = new Animated.Value(0);
    });
  }

  componentDidMount() { 
    this.animate();
  }

  animate() { 
    const animations = arr.map((item) => {
      return Animated.timing(
        this.animatedValue[item],
        {
          toValue: 1,
          duration: 50
        }
      )
    });
    Animated.sequence(animations).start();
  }

  render() {
    const animations = arr.map((a, i) => { 
      return <Animated.View
        key={i}
        style={{
          opacity: this.animatedValue[a],
          height: 40,
          width: 40,
          backgroundColor: 'blue',
          marginLeft: 5,
          marginTop:5  
        }}
      />
    })

    return (
      <View style={styles.container}>
        {animations}
      </View>

    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap:'wrap',
  },

});