解释 React Native 中的动画

React Native 中的动画： React Native 有一个 Animated API 来处理应用程序中的动画。它具有创建大多数类型动画的各种功能（例如淡化、颜色变化、宽度和高度变化、位置变化）。我们将主要使用 Animated.parallel、Animated.timing、Animated.value 和 Animated.View 这个例子。

实施：现在让我们从实施开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init animationDemo
```
第 3 步：现在进入您的项目文件夹，即 animationDemo
```
cd animationDemo
```

项目结构：它将如下所示。

目录结构

创建动画的步骤：

定义状态：我们将从'react-native'导入Animated 。然后我们将声明我们的状态，稍后将由 animate函数更改。在此，我们使用“right”，它将从左向右移动，反之亦然。以及“radius”状态，它会在动画期间改变视图的边界半径。
定义动画函数：我们将定义两个函数leftToRight和rightToLeft ，它们将在调用时为 View 设置动画。在此，我们使用了Animated.parallel()函数，该函数用于同时运行多个动画。 Animated.timing()函数以状态、动画持续时间、最终值作为参数。 Start()用于启动动画。
创建视图：现在我们将使用创建一个视图，并以样式传递动画状态。

注意：使用创建一个将根据动画状态进行动画处理的视图。正常将抛出 Stack limit exceeded 错误。

App.js

import React, { Component } from 'react';
import { Text, View, Animated, Dimensions, Button } from 'react-native';
  
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: new Animated.Value(
        Dimensions.get('window').width - 200),
      radius: new Animated.Value(0),
    };
  }
  
  leftToRight = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 200,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };
  
  rightToLeft = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: Dimensions.get('window').width - 200,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };
  
  render() {
    return (
      
        
          
            Animated View

App.js


  
    Animated View

使用以下命令启动服务器。

npm run android

输出：

输出

插值：假设我们想使用“%”而不是数字来定义正确的样式属性。如果我们在中传递“%”并尝试在Animated.timing()函数中更改它，我们将得到一个错误。这就是插值有帮助的地方。它将输入范围映射到输出范围（例如 0-100 到 0%-100%）。我们只需在正确的样式道具中应用插值，其余代码将是相同的。

应用程序.js


  
    Animated View

参考： https://reactnative.dev/docs/animations