React Native 动画之 Animated.parall

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

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

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

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

Animated.parallel()

效果图

animated04.jpg

实例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Text,
  Easing,
  TouchableHighlight
} from 'react-native';
export default class App extends Component {
  constructor(props) {  //构造函数
    super(props);
    this.animatedValue1 = new Animated.Value(0);
    this.animatedValue2 = new Animated.Value(0);
    this.animatedValue3 = new Animated.Value(0);
  }

  componentDidMount() { 
    this.animate();
  }

  animate() { 
    this.animatedValue1.setValue(0);
    this.animatedValue2.setValue(0);
    this.animatedValue3.setValue(0);
    const createAnimation = function (value, duration, easing, delay = 0) { 
      return Animated.timing(
        value,
        {
          toValue: 1,
          duration,
          easing,
          delay
        }
      )
    }
    Animated.parallel([
      createAnimation(this.animatedValue1, 2000, Easing.ease),
      createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
      createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
    ]).start();
  }

  render() {
    const scaleText = this.animatedValue1.interpolate({
      inputRange: [0, 1],
      outputRange: [0.5, 2]
    });

    const spinText = this.animatedValue2.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '720deg']
    });

    const introButton = this.animatedValue3.interpolate({
      inputRange: [0, 1],
      outputRange: [-100, 400]
    });
    return (
      <View style={styles.container}>
        <Animated.View
          style = {{transform:[{scale:scaleText}]}}
        >
        <Text>Welcome</Text>
        </Animated.View>

        <Animated.View
          style={{ marginTop: 20,transform: [{ rotate: spinText }] }}
        >
          <Text style={styles.text}>To the App</Text>
        </Animated.View>

        <Animated.View
          style = {{top:introButton,position:'absolute'}}
        >
          <TouchableHighlight
            style={styles.button}
            onPress={this.animate.bind(this)}
          >
            <Text style={styles.buttonText}>
            Click here to Start
            </Text>
          </TouchableHighlight>

        </Animated.View>
      </View>

    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },

  text: {
    fontSize: 20
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#1FB9FF',
    padding: 10
  },
  
  buttonText: {
    fontSize: 20,
    color:'white'
  }
});