如何在成帧运动中为背景图像设置动画？

Question

我正在尝试将 framer-motion 与 reactjs + 样式组件一起学习。我想知道如何在 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 相同的规则，因为它的值必须是可测量的。在您的情况下，具有“背景图像”属性的 CSS 仅了解“背景图像”的值是“X”图像或“Y”图像。它不了解两者之间的任何内容（您假设在更改图像之间存在任何类型的不透明度变化）。

您需要做的是设置动画以控制元素与背景图像的不透明度。我假设你没有选择这条路线，因为在这个父元素中存在其他元素，你不想看到不透明度的变化。在这种情况下，我建议使用 img 标签作为背景或使用另一个在所述父元素中绝对定位（顶部：0，左侧：0，宽度：100%，高度：100%）的 div 元素，并在该元素上设置背景。

最终这将不是您需要 Framer-Motion 的东西，而是可以使用简单的 CSS。