React Native 动画之 Animated.timing

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

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

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

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

Animated.timing()

效果图

animated.jpg

实例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Easing
} from 'react-native';
export default class App extends Component { 
  constructor(props) {  //构造函数
    super(props);
    this.spinValue = new Animated.Value(0); //使用 Animated.Value 声明了一个 spinValue 变量，并传了一个 0 作为初始值。
  }

  componentDidMount() { 
    this.spin();    //app加载后运行动画
  }

  spin() {
    this.spinValue.setValue(0);   //重置为0
    Animated.timing( //并驱动 this.spinValue 的值以 Easing.linear 的动画方式在 4000 毫秒从 0 变成 1。
      this.spinValue,
      {
        toValue: 1,
        duration: 4000,
        easing: Easing.linear
      }
    ).start(() => { this.spin() }); //调用 start()，并将 this.spin 作为回调传递给 start，它将在(一次)动画完成之后调用，这也是创建无穷动画的一种基本方式。
  }
  render() {
    //创建了一个 spin 变量，并调用了 this.spinValue 的 interpolate 方法。
    //interpolate 方法可以在任何一个 Animated.Value 返回的实例上调用，该方法会在属性更新之前插入一个新值，如将 0~1 映射到 1~10。
    //在我们的demo中，利用 interpolate 方法将数值 0~1 映射到了 0deg~360deg。我们传递了 inputRange 和 outputRange 参数给interpolate 方法，并分别赋值为[0, 1] 和 & [‘0deg’, ‘360deg’]。
    const spin = this.spinValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });
    return (
      <View style={styles.container}>
        <Animated.Image
          style={{
            width: 227,
            height: 200,
            transform:[{rotate:spin}]
          }}
          source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
        />
        </View>
    )
  }
}

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

附：Easing源码

创建复杂动画

效果图

animated02.jpg

实例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Easing,
  Text
} from 'react-native';
export default class App extends Component { 
  constructor(props) {  
    super(props);
    this.animatedValue = new Animated.Value(0); 
  }

  componentDidMount() { 
    this.animate();    
  }

  animate() {
    this.animatedValue.setValue(0); 
    Animated.timing( 
      this.animatedValue,
      {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear
      }
    ).start(() => { this.animate() }); 
  }
  render() {
    const marginLeft = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 300]
    });
    const opacity = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [0, 1, 0]
    });

    const movingMargin = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [0, 300, 0]
    });

    const textSize = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [18, 32, 18]
    });

    const rotateX = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ['0deg', '180deg', '0deg']
    });
    return (
      <View style={styles.container}>
        <Animated.View
          style={{
            marginLeft,
            width: 30,
            height: 40,
            backgroundColor:'red'
          }}
        />

        <Animated.View
          style={{
            opacity,
            marginTop:10,
            width: 30,
            height: 40,
            backgroundColor: 'blue'
          }}
        />

        <Animated.View
          style={{
            marginLeft:movingMargin,
            marginTop: 10,
            width: 30,
            height: 40,
            backgroundColor: 'orange'
          }}
        />

        <Animated.Text
          style={{
            fontSize: textSize,
            marginTop: 10,
            color: 'green',
          }}
        >
          Animated Text!
        </Animated.Text>

        <Animated.View
          style={{
            transform: [{rotateX}],
            marginTop: 50,
            width: 40,
            height: 30,
            backgroundColor: 'black'
          }}
        >
          <Text style={{ color: 'white' }}>Hello from TransformX</Text>
        </Animated.View>

        </View>
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    paddingTop:150,
    backgroundColor: 'white'
  },
  
});