RN-Animated组件

Animated 提供了4个可动画的组件:
Animated.View
Animated.Text
Animated.Image
Animated.ScrollView

渐变效果(opacity)

import React from 'react';

import {
  StyleSheet,
  Animated,
  Easing,
  TouchableWithoutFeedback,
  Text
} from 'react-native';

export default class MYAnimated extends React.PureComponent {
  constructor(props) {
    super(props);
    this.opacity = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(
      this.opacity,
      {
        toValue: 1,
        easing: Easing.linear,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <TouchableWithoutFeedback>
        <Animated.View
          style={[styles.contain, { opacity: this.opacity }]}
        >
          <Text style={{ fontSize: 16, color: 'red', marginTop: 200 }}>渐变text</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  contain: {
  }
});

平移效果(translate)

import React from 'react';

import {
  StyleSheet,
  Animated,
  Easing,
  TouchableWithoutFeedback,
  Text
} from 'react-native';

export default class MYAnimated extends React.PureComponent {
  constructor(props) {
    super(props);
    this.xPosition = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(
      this.xPosition,
      {
        toValue: 1,
        easing: Easing.linear,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <TouchableWithoutFeedback>
        <Animated.View
          style={[styles.contain, {
            transform: [
              { // 偏移效果
                translateY: this.xPosition.interpolate({
                  inputRange: [0, 1],
                  outputRange: [50, 0]
                })
              }
            ]
          }]}
        >
          <Text style={{ fontSize: 16, color: 'red', marginTop: 200 }}>text</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  contain: {
  }
});

旋转效果(transform)

import React from 'react';

import {
  StyleSheet,
  Animated,
  Easing,
  TouchableWithoutFeedback,
  Text
} from 'react-native';

export default class MYAnimated extends React.PureComponent {
  constructor(props) {
    super(props);
    this.xPosition = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(
      this.xPosition,
      {
        toValue: 1,
        easing: Easing.linear,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <TouchableWithoutFeedback>
        <Animated.View
          style={[styles.contain, {
            transform: [
              { // 旋转效果
                rotate: this.xPosition.interpolate({
                  inputRange: [0, 1], //[0, 0.5, 1]
                  outputRange: ['0deg', '360deg'] // ['0deg', '360deg','0deg']
                })
              }
            ]
          }]}
        >
          <Text style={{ fontSize: 16, color: 'red', marginTop: 200 }}>text</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  contain: {
  }
});

style效果(fontSize、marginTop...)

import React from 'react';

import {
  StyleSheet,
  Animated,
  Easing,
  TouchableWithoutFeedback,
  Text
} from 'react-native';

export default class MYAnimated extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fontsize = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(
      this.fontsize,
      {
        toValue: 1,
        easing: Easing.linear,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <TouchableWithoutFeedback>
        <Animated.Text
          style={[styles.contain, {
            fontSize: this.fontsize.interpolate({
              inputRange: [0, 1],
              outputRange: [18, 36]
            })
          }]}
        >
          text
        </Animated.Text>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  contain: {
  }
});