reactjs - 如何在成帧器运动中对背景图像进行动画处理？

Question

我正在尝试与reactjs +样式组件一起学习framer-motion。我想知道如何在 div 的背景图像上添加平滑的动画/过渡。

这是我尝试过的变体:

const parentVariants = {
    car: {
        backgroundImage:  `url(${CarImage})`,
        transition: {duration: 0.5}
    },
    house: {
        backgroundImage:  `url(${HouseImage})`,
        transition: {duration: 0.5} 
    },
    mountain: {
        backgroundImage:  `url(${MountainImage})`,
        transition: {duration: 0.5}
    }
}

const Test = () => {
    const [background, setBackground] = useState('car')
    const changeBackground = (image) => setBackground(image)

    return (
        <Parent
            variants={parentVariants}
            initial='car'
            animate={`${background}`}
        >
            <Car onMouseEnter={() => changeBackground('car')}>Car</Car>
            <House onMouseEnter={() => changeBackground('house')}>House</House>
            <Mountain onMouseEnter={() => changeBackground('mountain')}>Mountain</Mountain>
        </Parent>
    )
}

但显然，并没有发生平稳的过渡。背景图像立即改变。

Answer 1

您尝试使用 Framer-Motion 设置动画的任何属性都遵循与 CSS 相同的规则，因为它的值必须是可测量的。在您的情况下，对于“background-image”属性，CSS仅理解“background-image”的值是“X”图像或“Y”图像。它不理解两者之间的任何内容(您假设在更改图像之间存在任何类型的不透明度变化)。

您需要做的是设置动画来控制带有背景图像的元素的不透明度。我假设您没有选择此路线，因为此父元素中存在其他元素，您不希望看到不透明度发生变化。在这种情况下，我建议使用 img 标签作为背景或使用另一个div 元素在所述父元素中绝对定位(顶部:0，左侧:0，宽度:100％，高度:100％)，并在该元素上设置背景。

最终，这将不再是您需要 Framer-Motion 的事情，而是可以通过简单的 CSS 来完成的事情。