1

我正在使用以下内容尝试通过成帧器运动将一个简单的正方形从红色变为绿色。如果我使用具有不透明度的完全相同的代码，一切正常。同样，如果我用 x 和 y 变换正方形。但是使用填充，一旦正方形渲染它就会改变填充，并且没有过渡。经过几个小时试图理解这是为什么，我找不到答案。

在文档中它说“例如，像 x 或比例这样的物理属性将通过弹簧模拟进行动画处理。而像不透明度或颜色这样的值将使用补间动画。”

它没有提到我是否需要做更多来创建这个补间。

任何帮助将不胜感激，谢谢。

  const pathVariants = {
    notSwitched: {
      fill: 'red',
    },
    switched: {
      fill: 'green',
    },
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="600"
      height="300"
      viewBox="0 0 600 300"
    >
      <motion.path
        initial="switched"
        animate="notSwitched"
        variants={pathVariants}
        id="square"
        d="M38,212V88H162V212Z"
      />
    </svg>
  )
4

0 回答 0