React Native 如何实现 Android 加载动画

本文将介绍如何使用 React Native 实现 Android 加载动画，包括如何创建和使用不同类型的加载动画。在这篇文章中，你将学习如何使用 React Native 的动画 API 和第三方库来创建适合你的应用的动画效果。

什么是加载动画

加载动画是一种用于告诉用户应用正在加载数据的动画效果。在进行异步操作时，一个好的加载动画能够增强用户体验，让用户感受到应用正在工作，并且不会因为等待变得无聊或者不耐烦。

React Native 动画 API

React Native 提供了一组强大的动画 API，可以通过代码来实现复杂的动画效果。以下是一些常用的动画 API：

• Animated：使用 JavaScript 驱动的动画库，可以完成大部分简单到中等复杂的动画。
• LayoutAnimation：使用原生平台的动画来实现简单的布局动画，支持视图插入、删除和位置更新。
• PanResponder：用来处理手势操作，并支持通过手势操作来完成动画操作。

针对加载动画的需求，Animated 是我们主要想要用到的 API。

Animated

Animated 库提供了一些基本的动画组件和方法，用于创建交互式、流畅的动画效果。Animated 使用了 Virtualized Tree 形式的数据结构，可以有效地处理大量动画效果。

基本用法

在开始对 Animated 进行解释之前，我们需要了解一下它的核心概念。在 Animated 中，每个动画都有一个 Animated.Value 对象，该对象代表了动画的进度。也就是说，该对象的值会在动画执行过程中发生变化，并会影响到动画最终的效果。

以下是基本用法的示例代码：

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { Animated, Text, View } from 'react-native'

class App extends Component {
  constructor() {
    super()
    this.state = {
      fadeAnim: new Animated.Value(0),
    }
  }

  componentDidMount() {
    Animated.timing(
      this.state.fadeAnim,
      {
        toValue: 1,
        duration: 1000,
      }
    ).start()
  }

  render() {
    return (
      <Animated.View style={{ opacity: this.state.fadeAnim }}>
        <Text>Fade in</Text>
      </Animated.View>
    )
  }
}

export default App

动画样式

Animated.View 支持的样式与普通的 View 一样，只是添加了一个 opacity 属性，可以通过设置 opacity 来控制视图的透明度。除此之外，Animated 支持的样式还包括 transform，例如缩放、倍增等等都可以通过 transform 实现。

以下是一个使用 Animated.View 和 transform 实现旋转动画的示例：

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { Animated, Text, View } from 'react-native'

class App extends Component {
  constructor() {
    super()
    this.state = {
      spinAnim: new Animated.Value(0),
    }
  }

  componentDidMount() {
    Animated.timing(
      this.state.spinAnim,
      {
        toValue: 1,
        duration: 1000,
      }
    ).start()
  }

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

    return (
      <Animated.View style={{ transform: [{ rotate: spin }] }}>
        <Text>Spin</Text>
      </Animated.View>
    )
  }
}

export default App

动画序列

Animated 支持序列动画，可以通过使用 Animated.sequence 组合多个动画效果。以下是一个使用 sequence 实现透明从 0 到 1，然后向上移动到顶部的示例代码。

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { Animated, Text, View } from 'react-native'

class App extends Component {
  constructor() {
    super()
    this.state = {
      opacityAnim: new Animated.Value(0),
      positionAnim: new Animated.ValueXY({ x: 0, y: 800 }),
    }
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(this.state.opacityAnim, {
        toValue: 1,
        duration: 1000
      }),
      Animated.spring(this.state.positionAnim, {
        toValue: { x: 0, y: 0 },
        friction: 6
      })
    ]).start()
  }

  render() {
    return (
      <Animated.View style={[{
        opacity: this.state.opacityAnim,
        transform: this.state.positionAnim.getTranslateTransform()
        }]}>
        <Text>This is a sequence animation</Text>
      </Animated.View>
    )
  }
}

export default App

并行动画

除了通过序列动画组合动画效果之外，Animated 还支持并行动画。你可以使用 Animated.parallel 将多个动画作为参数传入，以实现同时执行多个动画。

以下是一个使用 parallel 实现同时旋转和放大的示例代码。

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { Animated, Text, View } from 'react-native'

class App extends Component {
  state = {
    spinAnim: new Animated.Value(0),
    scaleAnim: new Animated.Value(0),
  }

  componentDidMount() {
    Animated.parallel([
      Animated.timing(this.state.spinAnim, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.spring(this.state.scaleAnim, {
        toValue: 1,
        friction: 1,
        useNativeDriver: true,
      }),
    ]).start()
  }

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

    const scale = this.state.scaleAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [0.5, 1],
    })

    return (
      <Animated.View
        style={[
          styles.container,
          { transform: [{ rotate: spin }, { scale }] },
        ]}
      >
        <Text>Parallel animation</Text>
      </Animated.View>
    )
  }
}

export default App

第三方加载动画库

虽然 React Native 提供了一些强大的动画 API，但是对于复杂的加载动画效果，你需要使用第三方库来满足你的需求。以下是一些常用的第三方加载动画库：

• React Native Lottie：使用 Airbnb 开发的轻量级加载动画库，支持使用 After Effects 动画和 Lottie 动画。
• React Native Spinkit：使用 React Native 进行实现的一些基本的加载动画组件，如旋转动画、跳跃动画等等。
• React Native Loading Spinner Overlay：一个使用纯 CSS 实现的加载动画库，支持加载进度展示，并且对于更高级的动画效果并没有原生的支持。

以下我们将带你了解使用 React Native Spinkit 和 React Native Lottie 来实现 Android 加载动画效果的方法。

使用 React Native Spinkit

React Native Spinkit 是一个非常受欢迎的第三方加载动画库，具有高度的自定义性和易用性。在本节中，我们将会带大家了解如何使用 React Native Spinkit 来实现 Android 加载动画效果。

安装

首先，我们需要在我们的 React Native 应用中安装 React Native Spinkit，安装方法如下：

npm install react-native-spinkit --save

用法

安装完毕后，我们需要在需要使用它的文件中引入组件。

import Spinner from 'react-native-spinkit'

然后，在组件中使用它。

<Spinner
  isVisible={true}
  size={50}
  type={'ThreeBounce'}
  color={'#f00'}
/>

在上面的例子中，我们使用了 isVisible、size、type 和 color 四个属性。isVisible 指定该组件是否可见，size 指定了它的尺寸，type 指定了它的类型，color 指定了它的颜色。React Native Spinkit 支持的动画类型包括：

• Circle
• Bounce
• Wave
• Pulse
• ChasingDots
• ThreeBounce
• FourBounce
• DoubleBounce
• WanderingCubes
• RotatingPlane
• FoldingCube
• WordPress

<Spinner isVisible={true} size={50} type={'Wave'} color={'#f00'} />

在 React Native Spinkit 中，你还可以使用多个 Spinkit 组件来实现更复杂的加载动画效果。以下是一个使用不同类型的 Spinkit 组件来实现混合动画的示例代码。

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { View } from 'react-native'
import Spinner from 'react-native-spinkit'

class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Spinner isVisible={true} size={50} type={'Circle'} color={'#f00'} />
        <Spinner isVisible={true} size={50} type={'ThreeBounce'} color={'#f00'} />
        <Spinner isVisible={true} size={50} type={'Pulse'} color={'#f00'} />
      </View>
    )
  }
}

export default App

使用 React Native Lottie

React Native Lottie 是一个使用 JSON 格式的矢量动画库，可以用于实现解码和呈现由 Adobe After Effects 制作的带有身份和复杂度的矢量动画。接下来，我们将会带大家了解如何使用 React Native Lottie 来实现 Android 加载动画效果。

安装

首先，我们需要在我们的 React Native 应用中安装 React Native Lottie，安装方法如下：

npm install lottie-react-native --save

简单用法

安装完毕后，我们需要在需要使用它的文件中引入组件。

import LottieView from 'lottie-react-native'

然后，在组件中使用它。

<LottieView source={require('./assets/animations/loader.json')} autoPlay loop />

在上面的例子中，我们使用了 source、autoPlay 和 loop 三个属性。source 指定了动画文件的相对路径，autoPlay 指定了是否自动播放动画，而 loop 则是指定动画是否循环播放。

定制选项

除了上面提到的三个属性之外，Lottie 支持的选项还包括：

• speed：播放速度。
• progress：动画进度。
• loop：指定动画是否循环，默认值为 true。
• autoPlay：指定动画是否自动播放，默认值为 true。
• resizeMode：动画的调整模式，有 'cover'、'center'、'contain' 三种。
• repeatCount：如果不是无限循环，则 repeatCount 指定动画循环次数。

<LottieView
  source={require('./assets/animations/loader.json')}
  loop={false} autoPlay={false}
  style={{ width: 300, height: 300 }}
  progress={this.state.progress}
/>

动画事件

使用 LottieView 组件还可以监听动画事件，进行更加自由的控制。

// javascriptcn.com 代码示例
import LottieView from 'lottie-react-native'

class App extends Component {
  onAnimationFinish = () => {
    console.log('Animation finished!')
  }

  render() {
    return (
      <LottieView
        source={require('./assets/animations/loader.json')}
        autoPlay={true} loop={false}
        onAnimationFinish={this.onAnimationFinish}
      />
    )
  }
}

export default App

在上面的例子中，我们为 onAnimationFinish 设置了一个回调函数，以便在动画结束时触发该回调。

总结

如今，加载动画已经成为了一款应用体验的重要组成部分，让用户更好地感知应用运行的状态。对于 React Native 应用，我们可以使用自带的 Animated API 或者是第三方库来实现加载动画的效果，从而提升用户的体验感。希望通过本文的讲解，您能熟练地使用 React Native 的 Animated API 和第三方库，实现丰富的加载动画效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653524397d4982a6ebb4026b