Question

我正在使用 framer-motion 为一页中的多个元素设置动画。由于 framer-motion 没有一种简单的方法来为元素在视口中设置动画，因此我正在使用此方法：

const controls = useAnimation();
const { ref, inView } = useInView();

useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
    if (!inView) {
      controls.start("hidden");
    }
  }, [controls, inView]);

const fadeFromBottom = {
    hidden: {
      opacity: 0,
      y: -5,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        delay: 0.4,
      },
    },
  };

return (
<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>

但是，这种方法只允许我为每个 .jsx 文件设置一个元素的动画。如果我想在进入视口时为两个部分设置不同的动画，我该怎么做？例如，我将如何在不同时间使用不同动画为这两个部分设置动画？

<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>
<motion.section
  ref={ref}
  variants={fadeFromLeft}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>

Answer 1

您可以创建一个钩子，将动画组件的逻辑包装在“视图中”

const useAnimateOnInView = () => {
    const controls = useAnimation();
    const { ref, inView } = useInView();
    
    useEffect(() => {
        if (inView) {
          controls.start("visible");
        }
        if (!inView) {
          controls.start("hidden");
        }
      }, [controls, inView]);
    

     return { ref };
}

将钩子用于您想要制作动画的所有内容

const { ref: bananaRef } = useAnimateOnInView();
const { ref: appleRef } = useAnimateOnInView();

然后将 refs 连接到相关的 dom 元素。

<motion.section
  ref={bananaRef}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='banana'>
</motion.section>
<motion.section
  ref={appleRef}
  variants={fadeFromLeft}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='apple'>
</motion.section>

您也可以复制现有的 useInView 钩子用法，并向 useEffect 添加一些逻辑。不过我觉得这个钩子清理了一下。

如何在视口中一次为多个成帧器运动元素设置动画

1 个答案: