帧运动不同属性的不同动画

Question

我正在尝试使用Chakra-ui和Gatsby在帧运动中设置动画，其中有旋转、移动和不透明度变化。

目前，动画在x轴上的移动和旋转都是按照我的想法使用type:spring实现的，但是“反弹效果”也会影响不透明度。

我试图显式地定义不透明度属性的type:tween，但这对对象的不透明度也没有影响。下面是我的代码：

const Rocketship = ({ top, right, bottom, left, opacity }) => {
        const RocketAnim = motion(Box)
        const transition = {
                default: {
                        type: 'spring',
                        damping: 5,
                },
                opacity: { type: 'tween' },
        }

        return (
                <RocketAnim
                        layoutId="rocketship"
                        initial={{ rotate: 25, x: -100, opacity: 0 }}
                        animate={{ rotate: 45, x: 0, opacity }}
                        whileHover={{ width: '170px', cursor: 'pointer' }}
                        transition={transition}
                        pos="fixed"
                        width={150}
                        top={top}
                        right={right}
                        bottom={bottom}
                        left={left}
...

如果有任何建议，我将不胜感激。

Answer 1

没有一个完整的答案，因为没有足够的上下文，但是

1. 您的RocketAnim应该在组件外部定义，因为您不需要重新创建它。render
2. 您不必将其设置为补间，我会将其保留为弹簧(默认值)，只需将其设置为0

即可

opacity: { bounce: 0}

1. 如果你把它当做补丁，我会试着增加一个持续时间来解决弹跳的问题。