使用framer-motion的滚动插值justifyContent的技巧

Question

我有一段代码可以在x值之间进行动画，但是当尝试从justify-content: center转换到left时无法工作。

以下是代码片段：

function Navbar() {
  const { scrollY } = useScroll();
  const x = useTransform(scrollY, [0, 100], ["center", "left"]);

  return (
    <motion.div 
    layout
      className={styles.parent}
      style={{ justifyContent: x, display: "flex" }}
      transition={{
        duration: 0.5
      }}
    > 
      <Image
            src="/BlackLogo-2.svg"
            alt="Cg Logo"
            width={100}
            height={100}
            style={{padding: 20,}}
            priority
          />
    </motion.div>
  )

}

Answer 1

我找到了一个解决方案。你只需使用useMotionValueEvent函数来检查是否滚动超过某一点，并将其设置为状态，然后必须将你的子元素（我的图片）包装在motion.div中，同时在外部div中设置类，如下所示：

function Navbar() {
  const { scrollY } = useScroll();
  const [Scrolled, setScrolled] = useState(false);
  
  useMotionValueEvent(scrollY, "change", (latest) => {
    if (latest > 200) {
      setScrolled(true);
    }
    else {
      setScrolled(false);
    }
  })

  return (
    <div 
      style={{justifyContent: Scrolled? "left" : "center"}}
      className={styles.icon}
    > 
      <motion.div
      layout
      transition={{type: "spring", stiffness: 700, damping: 30}}
      >
        <Image
          src="/BlackLogo-2.svg"
          alt="Cg Logo"
          width={100}
          height={100}
          style={{padding: 20,}}
          priority
        />
      </motion.div>
    </div>
  )

}