如何构建动画，通过运动帧增加图像尺寸？

Question

我正在尝试构建像 Neurable 这样的动画 https://www.neurable.io/

您可以在标题和下面一点的维护者图像中看到这个动画。基本上，图像的初始比例为 0.8，当目标达到视口的 0.5 时，图像逐渐增大，直到比例为 1.0。

此应用程序是使用 Next.js 构建的

我已经尝试过这种方法，但图像保持静态，比例为 0.8

"use client";

import Image from "next/image";
import "./about.scss";;
import { useRef } from "react";
import { useScroll, motion } from "framer-motion";

const About = () => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0 0.5", "0.5 0.5"],
  });

return (
<motion.div
         ref={ref}
        initial={{ scale: 0.8 }}
        animate={{
          scale: scrollYProgress,
          transition: {
            duration: 1,
          },
        }}
      >
        <section
          className="test"
          style={{
            width: "100%",
            height: "100vh",
            minHeight: "262px",
            paddingTop: "96px",
          }}
        >
          <Image
            src="/about.svg"
            alt="about_people"
            width={0}
            height={0}
            style={{
              objectFit: "cover",
              width: "100%",
              height: "100%",
              margin: "auto",
            }}
          />
        </section>
      </motion.div>
)
}

如果我取消初始属性，它会起作用，但是图像以比例 0 开始，并且它不是我需要的动画。

<motion.div
        ref={ref}
        style={{
          scale: scrollYProgress,
        }}
      >
        <section
          className="test"
          style={{
            width: "100%",
            height: "100vh",
            minHeight: "262px",
            paddingTop: "96px",
          }}
        >
          <Image
            src="/about.svg"
            alt="about_people"
            width={0}
            height={0}
            style={{
              objectFit: "cover",
              width: "100%",
              height: "100%",
              margin: "auto",
            }}
          />
        </section>
      </motion.div>
    </>
  );
};

export default About;

Answer 1

说明： 如果

animate

中的值与

style

或

initial

中定义的值不同，Framer-motion 将自动以动画形式呈现。

useScroll

钩子返回一个不重新渲染状态的运动值。 （将运动值想象为 React 中的 refs 的等价物）。这里的主要目标是我们自己控制动画。

解决方案： 您正在寻找基于您在动画组件的

style

字段（而不是初始/动画字段本身）中提供的转换后的运动值的动画。

// For a smooth animation:
// interpolate the raw scrollYProgress with the spring engine.
const smoothScrollYProgress = useSpring(scrollYProgress)

// Transform scrollYProgress to the desired scale (starts from 0.8, ends at 1.0).
const scale = useTransform(smoothScrollYProgress, [0, 1], [0.8, 1])

return <motion.div ... style={{ scale }}>...</motion.div>

在文档中阅读有关

useTransform

的更多信息：https://www.framer.com/motion/use-transform/