不同属性的 Framer Motion 不同动画

问题描述

我正在尝试使用 Chakra-ui 和 Gatsby 以成帧器运动为动画制作动画，其中有旋转、移动和不透明度变化。

目前动画按照我的意图在 x 轴上移动并使用 type:spring 进行旋转，但是“反弹效果”也会影响不透明度。

我已尝试为 opacity 属性明确定义 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}
...

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

解决方法

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

1. 您的 RocketAnim 应该在组件之外定义，因为您不需要在渲染时重新创建它
2. 您不必将其设为补间，我会将其保留为弹簧（默认值）并将反弹设置为 0

opacity: { bounce: 0}

3. 如果您将其保留为补间，我会尝试添加持续时间以解决弹跳问题。