React Spring循环对象

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

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

循环对象： 用于在循环中动画化任何对象。

语法：

useSpring({ 
    loop: true
})

创建React Spring App的步骤：

步骤1： 使用以下命令创建一个新的应用程序。

npx create-react-app reactspringdemo

步骤2： 现在使用以下命令移动创建的项目文件夹。

cd reactspringdemo

步骤3: 安装 react spring 库。

npm install react-spring

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

React Spring循环对象

示例1： 在下面的代码中，我们将使用上述语法来演示使用React Spring的循环对象。

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<title>React App</title> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Object</h2> 
  
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

GFG.jsx

import React from "react"; 
import { useSpring, animated } from "react-spring"; 
  
const LoopingObject = () => { 
  
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 180 }, 
        duration: 2000, 
    }); 
  
  
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: "d6d6d6", 
                borderRadius: 16, 
                boxShadow: "rgb(0,0,0,0.44) 0px 5px 5px", 
                display: "flex", 
                alignItems: "center", 
                justifyContent: "center", 
                color: "green", 
                ...styles, 
            }} 
        > 
            GFG 
        </animated.div> 
    ); 
}; 
  
export default LoopingObject;

App.js

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

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

npm start

输出：

React Spring循环对象

示例2： 在下面的代码中，我们将使用上述语法来演示使用React Spring的循环对象。在这个示例中，我们将通过360度旋转对象。

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<title>React App</title> 
  
 <body> 
  
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Object</h2> 
  
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

GFG.jsx

import React from "react"; 
import { useSpring, animated } from "react-spring"; 
  
const LoopingObject = () => { 
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 360 }, 
        duration: 2000, 
    }); 
  
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: "green", 
                borderRadius: 16, 
                boxShadow: "rgb(0,0,0,0.44) 0px 5px 5px", 
                display: "flex", 
                alignItems: "center", 
                justifyContent: "center", 
                color: "green", 
                ...styles, 
            }} 
        ></animated.div> 
    ); 
}; 
  
export default LoopingObject;

App.js

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

输出：

React Spring循环对象