React-Lottie 在对话中使用时会导致延迟问题

问题描述

我正在尝试使用 React-Lottie(lottie-web) 在文件悬停在对话中的步骤向导上创建烟花动画。这应该是什么样子；他们打开对话，将文件拖到放置区域上，背景烟花动画开始，然后放下文件，然后进行下一步。为此，我使用默认的 Material-UI Dialogue 组件和 react-step-wizard 中的 StepWizard。我的问题是在动画运行几次之后，打开和关闭它开始滞后，最终会使程序崩溃。这是我尝试执行此操作的文件。

import { DialogContent,DialogTitle } from "@material-ui/core";
import Dialog from "@material-ui/core/Dialog";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import AddIcon from "@material-ui/icons/Add";
import PublishIcon from "@material-ui/icons/Publish";
import lottie from "lottie-web";
import * as React from "react";
import StepWizard,{ StepWizardChildProps } from "react-step-wizard";
import animationData from "../public/fireworks.json";
import FloatingActionButton from "./FloatingActionButtomComp";
import { renderSnackBar } from "./index";

export function UploadImage(props: Partial<StepWizardChildProps>) {
  const [isPlaying,setPlaying] = React.useState(false);
  
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#firework-animation") as Element,animationData: animationData,loop: true,renderer: "canvas",autoplay: false
    });
  },[]);

  const onImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {};

  if (isPlaying) lottie.play();
  else lottie.stop();

  return (
    <div
      id="firework-animation"
      style={{
        display: "flex",justifyContent: "center",alignItems: "center",height: "100vh"
      }}
      onDrop={(e) => {
        console.log("Files dropped me things");

        e.preventDefault();

        if (e.dataTransfer.items) {
          if (e.dataTransfer.items.length > 1) {
            return renderSnackBar( //Method i provided for rendering SnackBars
              "Currently you cant upload more than 1 item at once!","error"
            );
          } else {
             lottie.destroy();
            (props as StepWizardChildProps).nextStep();
          }
        }
      }}
      onDragOver={(e) => {
        e.preventDefault();

        if (isPlaying) return;
        console.log("WERE IN");

        setPlaying(true);
      }}
      onDragLeave={(e) => {
        e.preventDefault();

        setPlaying(false);
      }}
    >
      <input
        type={"file"}
        accept={"image/png,image/jpeg,image/gif,image/jpg,image/webp"}
        id={"raw-image"}
        style={{ display: "none" }}
        onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
          onImageSelect(e);
        }}
      />

      <PublishIcon fontSize={"large"} />
    </div>
  );
}

export function Step2(props: Partial<StepWizardChildProps>) {
  return (
    <div>
      <button onClick={props.nextStep} />
      <h1>Click this</h1>
    </div>
  );
}

export default function App() {
  const [open,setopen] = React.useState(false);
  const stepWizard = React.useRef(<StepWizard>
      <UploadImage/>
      <Step2 />
    </StepWizard>);

  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));

  const handleClose = () => {
    setopen(false);
  };
  const handleOpen = () => setopen(true);


  return (
    <div className="App">
      <FloatingActionButton. 
        title={"Create"}
        icon={<AddIcon />}
        handle={() => {
          setopen(true);
        }}
      />

      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        maxWidth={"sm"}
        fullScreen={fullScreen}
        fullWidth
      >
       <DialogTitle id="alert-dialog-title">Create a Post</DialogTitle>
       <DialogueContent>
            {stepWizard.current}
       </DialogueContent>
      </Dialog>
    </div>
  );
}

这可能是一个平凡的问题，但我没有使用 React-lottie 的经验，所以任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）