React - 探索React Native中的动画效果

import React, { Component } from 'react';
import { Animated, Text, View } from 'react-native';
 
class FadingText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(1),  // 初始化为不透明
    };
  }
 
  componentDidMount() {
    Animated.sequence([
      Animated.timing(
        this.state.fadeAnim,
        {
          toValue: 0,
          duration: 1000,
        }
      ),
      Animated.timing(
        this.state.fadeAnim,
        {
          toValue: 1,
          duration: 1000,
        }
      ),
    ]).start();  // 开始动画
  }
 
  render() {
    return (
      <Animated.Text
        style={{
          opacity: this.state.fadeAnim,  // 绑定透明度到动画值
        }}
      >
        {this.props.children}
      </Animated.Text>
    );
  }
}
 
export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <FadingText>这是一个淡入淡出的文本动画</FadingText>
      </View>
    );
  }
}

这段代码展示了如何在React Native应用中创建一个简单的淡入淡出动画效果。FadingText组件在挂载之后会执行一个序列动画，先将文本透明度从1（不透明）变为0，然后再从0变回1，形成一个循环。这个例子简单易懂，并且展示了如何在React Native中使用Animated API。