使用效果是重复Lottie动画

发布于 2025-01-24 12:34:40 字数 720 浏览 5 评论 0原文

在这里学习反应，我只是试图展示洛蒂动画。似乎很简单，但是我在使用效果挂钩方面遇到了一些麻烦。我正在使用钩子在页面加载上渲染动画，但它会不断重复（有时是两次或更多）。我知道这是因为使用效率会不止一次发射，但我不确定如何处理。我只想在页面上一个动画。我该如何实现？

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;

原文

Learning React here, and I'm simply trying to display a lottie animation. Seems fairly straight-forward, but I'm having some trouble with the useEffect hook. I'm using the hook to render the animation on page load, but it keeps repeating itself (sometimes twice or more). I know this is because useEffect will fire more than once, but I'm not sure how to handle this. I just want one animation on the page. How can I achieve this?

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘东忘西忘不掉你 2025-01-31 12:34:40

这是因为反应严格模式，它试图帮助您检测不需要的副作用并运行所有使用效果两次挂钩，因此您可以看到您忘记了一些东西。在这种情况下，您忘了添加清理功能，没有lottie创建2个动画，而无需清理第一个动画。只需将其添加到您的代码中：

  useEffect(() => {
    const instance = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: require('../../../assets/Lottie/developer.json')
    });

    // Return clean up function here
    return () => instance.destroy();
  }, []);

codesandbox

It's because of React strict mode, it tries to help you to detect unwanted side effects and runs all useEffect hooks twice, so you could see that you forgot something. And in that case you forgot to add cleanup function, without it lottie creates 2 animations without cleaning up the first one. Just add this to your code:

  useEffect(() => {
    const instance = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: require('../../../assets/Lottie/developer.json')
    });

    // Return clean up function here
    return () => instance.destroy();
  }, []);

Codesandbox

回复收藏 0 原文

岁月静好 2025-01-31 12:34:40

useffect方法，当您编写时，它将在安装组件时执行内部函数，您的useffect还可以，您的lottie config对象具有loop重复动画的属性。你应该替换为

lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: false, //or delete this line
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
});

useEffect method as you have write it will execute the inside function when your component is mounted, your useEffect is ok, your lottie config object has a loop property that repeat your animation. You should replace by

lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: false, //or delete this line
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
});

回复收藏 0 原文

猫弦 2025-01-31 12:34:40

导入React，{usefeft，useref}来自“ React”；进口
“ ./index.scss”;从“ Lottie-Web”中导入Lottie;
const hero =（）=＆gt; {const lottiecontainer = useref（null）;
使用effeffect（（）=＆gt; {
constinstance = lottie.loadAnimation（{
容器：lottiecontainer.current，
渲染器：“ SVG”，
循环：是的，
自动播放：是的，
AnimationData：require（“ ../ ../ aSsets/lottie/developer.json”），
}）; return（）=＆gt; instance.destroy（）; }，[]）;
返回（
）； };
导出默认英雄;