React Spring兼容属性

在本文中，我们将学习如何使用React Spring使用兼容属性。 React Spring 是一个简化UI元素动画的动画库。它基于弹簧物理学，可以实现自然的外观和感觉。它与其他动画库不同，其他动画库需要处理曲线、缓动和时间间隔，它们之间是同步的。

平台： React Spring是一个跨平台库，支持React、React Native、Web和许多其他平台。它还支持所有浏览器。

兼容属性： 这意味着这些属性可以同时使用。

一些兼容的属性列表如下：

cancel： 此属性用于取消循环动画。
config： 此属性用于配置动画。
immediate： 此属性用于阻止动画。
onChange： 此属性用于逐帧回调动画。
onDelayEnd： 此属性用于在延迟结束时回调。
onProps： 此属性用于在spring或key的属性已更新时回调。
onRest： 此属性用于在弹簧或key停止时回调。
onStart： 此属性用于在弹簧或key开始动画时回调。
pause： 此属性用于在弹簧或key暂停时回调。

使用React创建应用的步骤：

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

npx create-react-app reactspringdemo

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

cd reactspringdemo

步骤3： 安装React Spring库。

npm install react-spring

项目结构：

它将如下所示。

React Spring兼容属性

示例1： 在以下代码中，我们将使用上述属性来演示兼容属性的使用。

GFG.jsx

import React from 'react'; 
import { useSpring, animated } from 'react-spring'
  
const CompatibleProps = () => { 
  
    /** 
    * Define the style for the animation 
    * using the useSpring hook 
    */
    const styles = useSpring({ 
        loop: true, 
        onStart: false, 
        onChange: false, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 360 }, 
        duration: 2000, 
    }); 
  
    /** 
    * Animated div is the extended version of div that 
    * accepts the properties defined above. 
    */
    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', 
            margin: 250, 
            ...styles, 
        }} >GFG</animated.div> 
    ); 
} 
  
export default CompatibleProps;

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： 在下面的代码中，我们将使用上面的props来演示兼容props的使用。

GFG.jsx

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

App.js

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

输出：

React Spring兼容属性