React Spring 介绍与安装

React spring 是一个动画库，它使动画 UI 元素变得简单。它基于弹簧物理学，有助于实现自然的外观和感觉。它与其他动画库不同，在其他动画库中，有人必须处理曲线、缓动、持续时间，所有这些都相互同步。

平台： React spring 是一个跨平台库，它支持 react、react-native、web 和更多平台。它还支持所有浏览器。

安装：要在您的项目中安装这个库，您可以从应用程序的根目录使用以下命令：

npm install react-spring

示例应用程序：为了看看使用这个库执行动画是多么简单，让我们创建一个小项目。我们将使用 react spring 库创建这个简单的动画。

步骤 1：使用以下命令创建一个新应用程序。
```
npx create-react-app reactspringdemo
```
第 2 步：现在使用以下命令移动创建的项目文件夹。
```
cd reactspringdemo
```
第三步：安装react spring库。
```
npm install react-spring
```

我们将创建一个在其 z 轴上旋转的组件LoopingCard 。 App.jsx是使用 LoopingCard 组件的主要组件。

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

项目结构。

例子： react spring的使用方式很简单。我使用了useSpring钩子，它接受一个反映动画应该如何展开的对象。要应用这些道具，我们必须使用动画模块中定义的元素的扩展版本。只需将 style 属性设置为useSpring返回的 prop 即可为元素设置动画。

LoopingCard.jsx

import React from 'react';
import { useSpring, animated } from 'react-spring'
   
const LoopingCard = ()=> {
   
    /**
     * Define the style for the animation
     * using the useSpring hook
     */
    const styles = useSpring({
        loop: true,
        from: {rotateZ: 0},
        to: {rotateZ: 360},
        duration: 2000,
    });
   
    /**
     * Animated div is the extended version of div that 
     * accepts the properties defined above.
     */
    return (GFG
    );
}
   
export default LoopingCard;

App.js

import React from 'react'
import LoopingCard from './LoopingCard'
  
function App() {
  console.log('hello')
  return (
    <>
      
    
  );
}
  
export default App;

使用 App.jsx 文件中的 LoopingCard 组件并使用以下命令运行应用程序。

应用程序.js

import React from 'react'
import LoopingCard from './LoopingCard'
  
function App() {
  console.log('hello')
  return (
    <>
      
    
  );
}
  
export default App;

运行应用程序：运行以下命令。

npm start

输出：