动画上的触发事件以 lottie-web 开头答案

【问题标题】：Trigger event on animation start with lottie-web动画上的触发事件以 lottie-web 开头
【发布时间】：2022-01-13 00:29:08
【问题描述】：

我目前正在开发一个 next.js 应用程序，我的目标是制作一个带有声音的“问候动画”。

我在动画开始时触发事件时遇到问题，所以我可以同步开始音乐。

这是我的代码，它显示动画但不记录任何内容：

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

function App() {
  const container = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: require("../media/lottie/greeter.json")
    });

    return () => {
      lottie.play();
    };
  }, []);

  return (
      <div className="dark-bg h-screen pointer-events-none"
        ref={container}
        onAnimationStart={() =>console.log("test")}
      />
  );
}

export default App;

感谢任何帮助！

【问题讨论】：

标签： typescript events next.js lottie

【解决方案1】：

看到您自动播放动画时，您可以侦听“DOMLoaded”事件，或者如果您想要“enterFrame”事件，然后忽略对回调的后续调用，因为它将在动画的每一帧播放时调用。

【讨论】：

【解决方案2】：

我发现了问题所在。我以错误的方式添加了事件，不得不使用“DOMLoaded”事件。

这对我有用：

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

function App() {
  const container = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: require("../media/lottie/greeter.json")
    });

    anim.addEventListener('complete', function(e) { console.log('element ended'); });
    anim.addEventListener('DOMLoaded', function(e) { console.log('element loaded'); });

    return () => {
      lottie.play();
    };
  }, []);

  return (
      <div className="dark-bg h-screen pointer-events-none"
        ref={container}
      />
  );
}

export default App;

【讨论】：