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 来完成。

如何在 framer-motion 中为背景图像设置动画？

1 个答案: