React Spring循环函数

React Spring循环函数

React Spring 是一个简化UI元素动画的动画库。它基于弹簧物理学,使得动画达到自然的外观和感觉。它不同于其他动画库,其他库需要处理曲线、缓动和时间持续等,而这些都是相互同步的。

循环函数 用于控制循环,例如如果循环设置为true,则循环将继续运行,如果循环设置为false,则循环将停止。

语法:

useSpring({ 
    from: { ... }, 
    to: { ... }, 
    delay: 100, 
    onRest: () => ... 
})
JavaScript

道具类型:

  • 循环道具: 用于定义重复动画。
  • 继承道具: 这些道具将合并到定义它所在的道具对象的副本中。
  • 取消道具: 用于取消动画。
  • 默认道具: 用于设置在同一次更新中定义的某些道具的默认值。

创建React应用的步骤:

步骤1: 使用以下命令创建新应用。

npx create-react-app reactspringdemo
JavaScript

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

cd reactspringdemo
JavaScript

步骤3: 安装 React Spring 库。

npm install react-spring
JavaScript

项目结构:

React Spring循环函数

示例1: 在下面的代码中,我们将使用上面的语法来演示循环函数的使用。

GFG.jsx

import React from 'react'; 
import { useSpring, animated } from 'react-spring'
  
/** 
* Define the style for the animation 
* using the useSpring hook 
*/
function LoopTrue() { 
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 180 }, 
    }) 
  
    /** 
    * Animated div is the extended version of div that 
    * accepts the properties defined above. 
    */
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: 'green', 
                borderRadius: 16, 
  
                ...styles, 
            }} 
        /> 
    ) 
} 
  
export default LoopTrue;
JavaScript

App.js

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

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" 
        content="Web site created using create-react-app" /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
</head> 
  
<body> 
    <noscript> 
        You need to enable JavaScript to run this app. 
      </noscript> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Function</h2> 
        <div id="root"></div> 
    </center> 
</body> 
  
</html>
JavaScript

运行应用程序的步骤: 在终端中打开并输入以下命令。

npm start
JavaScript

输出:

React Spring循环函数

示例2:

在下面的代码中,我们将看到循环函数如何工作。上面的示例设置了动画的轴,而下面的示例设置了循环的初始值和最终值。

GFG.jsx

import React from 'react'; 
import { useSpring, animated } from 'react-spring'
  
/** 
* Define the style for the animation 
* using the useSpring hook 
*/
function LoopTrue() { 
    const styles = useSpring({ 
        loop: { reverse: true }, 
        from: { x: 0 }, 
        to: { x: 100 }, 
    }) 
  
    /** 
    * Animated div is the extended version of div that 
    * accepts the properties defined above. 
    */
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: 'green', 
                borderRadius: 16, 
  
                ...styles, 
            }} 
        /> 
    ) 
} 
  
export default LoopTrue;
JavaScript

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" 
        content="Web site created using create-react-app" /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
</head> 
  
<body> 
    <noscript> 
        You need to enable JavaScript to run this app. 
      </noscript> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Function</h2> 
        <div id="root"></div> 
    </center> 
</body> 
  
</html>
JavaScript

App.js

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

输出:

React Spring循环函数

参考资料: https://react-spring.dev/common/props#the-loop-function

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册