React Spring 表现僵硬，好像没有质量或摩擦

Question

我正在使用 React spring 为一个对象制作动画，该对象向上移动页面并消失。出于某种原因，对象在整个动画中以相同的速度移动，无论我将 spring 配置设置为什么。我目前有：

import React, {useEffect} from 'react'
import styled from 'styled-components'
import {useSpring, useTrail, animated} from 'react-spring'
import {images} from '../../json/images'
import {useInView} from 'react-intersection-observer'

const RocketContainer = styled(animated.div)`
    position: absolute;
    height: 85px;
`
const Rocket = styled.img`
    height: 100%;
    transform: rotate(-45deg);
`
export default function Projects() {

    const projectImages = images.projects
    const [ref, inView] = useInView({
        threshold: 0,
        triggerOnce: true,
    })
    const [trail, setTrail, stopTrail] = useTrail(projectImages.length, () => (
        {
            opacity: 0,
            transform: 'translateY(150px)'
        }
    ))
    
    const [spring, setSpring, stopSpring] = useSpring(() => (
        {
        config: {
            duration: 3000,
            tension: 50,
            friction: 800,
            mass: 800
        },
        transform: 'translateY(0px)',
        opacity: 1
        }
    ))

    useEffect(() => {
        if(inView){
            setTrail({
                opacity: 1,
                transform: 'translateY(0px)',
                delay: 500,
            })
            stopTrail()
            setSpring({
                transform: 'translateY(-2200px)',
                opacity: 0,
                delay: 1700
            })
        }
        // eslint-disable-next-line
    }, [inView])

    return (
        <ProjectContainer id='projects'>
            <h1 style={{'fontSize': '4em', color: '#333'}}>Projects</h1>
            <Grid ref={ref}>
                {trail.map((attr, i) => (
                    <Project style={attr} key={projectImages[i][0]}>
                        <Name>{projectImages[i][2]}</Name>
                        <IconContainer>
                            <a href={projectImages[i][4]} target="_blank" rel="noopener noreferrer"><Icon src={projectImages[i][1]} /></a>
                        </IconContainer>
                        <Desc>{projectImages[i][3]}</Desc>
                        <div>
                            <DemoLink href={projectImages[i][4]} target="_blank" rel="noopener noreferrer">Live Demo</DemoLink>
                            <DemoLink href={projectImages[i][5]} target="_blank" rel="noopener noreferrer">GitHub</DemoLink>
                        </div>
                        
                    </Project>
                ))}
            </Grid>
            <RocketContainer style={spring}> //<---THIS IS WHERE THE SPRING IS IMPLEMENTED
                <Rocket src={`/img/icons/rocket.png`} />
            </RocketContainer>
            
        </ProjectContainer>
    )
}

我的足迹效果很好，符合预期。我已经提高了 spring 值只是为了尝试获得效果，除了延迟和持续时间之外似乎没有任何变化。代码有什么明显的错误吗？

Answer 1

React-spring 默认使用基于物理的动画。如果将持续时间属性添加到配置，它会切换到基于持续时间的动画。所以它会忽略其他属性。尽量只使用物理属性。

config: {
            tension: 170,
            friction: 5,
            mass: 1
        },

React Spring 表现僵硬，好像没有质量或摩擦

React Spring acting stiff, as if no mass or friction

reactjs

react-spring