React Spring配置

在本文中，我们将学习如何使用React Spring的配置。 React spring 是一个使UI元素动画化变得简单的动画库。它基于弹簧物理学，可以实现自然的外观和感觉。它与其他动画库不同，其他动画库中的曲线、缓动和时间持续等都是同步的。

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

配置： React Spring动画是可配置的，因此如果您想调整动画中的某些内容，可以通过使用配置和useSpring轻松实现。

语法：

useSpring({ config: { duration: ... }, ... })

用到的属性：

属性名	默认值	描述
mass	1	此属性用于定义质量。
tension	170	此属性用于定义张力。
friction	26	此属性用于定义摩擦力。
clamp	false	此属性用于使弹簧在超过边界时停止。
precision	0.01	此属性用于定义动画的精确值。
velocity	0	此属性用于定义动画的速度。
easing	t => t	此属性用于设置缓动函数，默认为线性函数。
damping	1	此属性用于设置阻尼比，它决定了弹簧减速的方式。默认情况下，仅在频率被定义为1时起作用。
progress	0	此属性用于决定从缓动函数的哪个位置开始。
duration	undefined	此属性用于定义动画的持续时间。
decay	undefined	此属性用于设置动画的衰减。
frequency	undefined	此属性用于设置动画的频率。
round	undefined	此属性用于设置循环次数。
bounce	undefined	当值大于零时，此属性用于定义弹簧在超过目标值时是否弹跳而不是超出。
restVelocity	undefined	此属性用于定义动画被认为是“停止运动”的最小速度，当未定义时，使用精确度替代。

示例1： 在下面的代码中，我们将使用以上语法来演示配置。

GFG.jsx

import React from 'react'; 
import { useSpring, animated, easings } from 'react-spring'
  
function EasingComponent() { 
    const { background, rotateZ } = useSpring({ 
        from: { 
            background: '#46e891', 
            rotateZ: 0, 
        }, 
        to: { 
            background: '#277ef4', 
            rotateZ: 225, 
        }, 
        config: { 
            duration: 2000, 
            easing: easings.easeInOutQuart, 
        }, 
        loop: { reverse: true }, 
    }) 
  
    return ( 
        <animated.div 
            style={{ 
                backgroundColor: 'd6d6d6', 
                borderRadius: 16, 
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px', 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center', 
                color: 'green', 
                margin: 250, 
                background, 
                width: 120, 
                rotateZ, 
            }} >GFG</animated.div> 
    ) 
} 
export default EasingComponent;

App.js

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

输出：

React Spring配置

示例2: 在下面的代码中，我们将使用上述语法来以相反的方式演示配置。

GFG.jsx

import React from 'react'; 
import { useSpring, animated, easings } from 'react-spring'
  
function EasingComponent() { 
    const { background, rotateZ } = useSpring({ 
        from: { 
            background: '#46e891', 
            rotateZ: 0, 
        }, 
        to: { 
            background: '#277ef4', 
            rotateZ: 225, 
        }, 
        config: { 
            duration: 2000, 
            easing: easings.easeInOutQuart, 
        }, 
        loop: true, 
    }) 
  
    return ( 
        <animated.div 
            style={{ 
                backgroundColor: 'd6d6d6', 
                borderRadius: 16, 
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px', 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center', 
                color: 'green', 
                margin: 250, 
                background, 
                width: 120, 
                height: 150, 
                rotateZ, 
            }} >GFG</animated.div> 
    ) 
} 
export default EasingComponent;

App.js

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

输出:

React Spring配置