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 (
      
        
          渐变text
        
      
    );
  }
}

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 (
      
        
          text
        
      
    );
  }
}

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 (
      
        
          text
        
      
    );
  }
}

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 (
      
        
          text
        
      
    );
  }
}

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