在 activityindicator 中制作动画

在移动应用程序中，为了向用户提供必要的反馈，活动指示器通常会用于标记正在处理中的过程。活动指示器是一个预定义的组件，可以轻松地添加到应用程序中，并在任务正在执行中时显示其进度。

使用ActivityIndicator组件

要在应用程序中使用活动指示器，您需要使用React Native提供的ActivityIndicator组件。使用该组件的步骤如下：

1.首先，将ActivityIndicator组件导入您的React Native JavaScript代码中，如下所示：

import { ActivityIndicator } from 'react-native';

2.接下来，在需要显示活动指示器的地方，使用ActivityIndicator组件的语法，如下所示：

<ActivityIndicator size="large" color="#0000ff" />

在上面的代码中，我们指定ActivityIndicator的两个属性：size和color。size属性定义指示器的大小，而color属性指定指示器的颜色。

3.最后，在任务完成后，记得将ActivityIndicator从屏幕中移除，否则它将一直显示。

制作自定义动画

如果您不想使用默认的ActivityIndicator动画，那么您可以制作自定义动画。制作自定义动画的步骤如下：

1.导入Animated组件

想要制作自定义动画，您需要导入React Native提供的Animated组件。Animated组件是一个高级别API，可以让您制作自定义动画。

import { Animated } from 'react-native';

2.开始制作您的自定义动画

下面是一个使用Animated组件制作的简单自定义动画的示例。在这个例子中，我们将使用两个动画值：一个旋转值和一个变换值。

export default class MyActivityIndicator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rotation: new Animated.Value(0),
      transformation: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.parallel([
      Animated.timing(this.state.rotation, {
        toValue: 1,
        duration: 1000,
      }),
      Animated.timing(this.state.transformation, {
        toValue: 1,
        duration: 500,
      }),
    ]).start();
  }

  render() {
    const rotateInterpolation = this.state.rotation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });

    const transformInterpolation = this.state.transformation.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 2],
    });

    const animatedStyles = [
      styles.box,
      { transform: [{ scale: transformInterpolation }] },
      { rotate: rotateInterpolation },
    ];

    return (
      <Animated.View style={animatedStyles}>
        <Text>Loading...</Text>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

在上面的代码中，我们创建了一个名为MyActivityIndicator的新组件，通过将旋转值和变换值设置为初始值并在componentDidMount生命周期方法中使用Animated.parallel来启动这两个动画。在render方法中，我们使用插值函数和animatedStyles数组来应用动画。

3.使用自定义动画

最后，您可以像使用ActivityIndicator一样使用自定义动画：

<MyActivityIndicator />

结论

在React Native应用程序中使用ActivityIndicator组件非常简单，但如果您想要更多的控制权，可以使用Animated组件制作自定义动画。我们希望这篇文章对您有所帮助！