0

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

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

我试图type:tween为 opacity 属性明确定义，但这对对象的不透明度也没有影响，仍然“弹跳”。这是我的代码：

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}
...

我将不胜感激任何建议

4

1 回答 1

0

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

  1. 您RocketAnim应该在组件之外定义，因为您不需要重新创建它来渲染
  2. 您不必将其设为补间，我会将其保留为弹簧（默认值）并将反弹设置为 0
opacity: { bounce: 0}
  1. 如果您将其保留为补间，我会尝试添加持续时间来解决弹跳问题。
于 2021-05-04T14:30:54.297 回答