动画触发事件从 lottie-web 开始

Question

我目前正在开发一个 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;

感谢任何帮助！

Answer 1

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

Answer 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;

动画触发事件从 lottie-web 开始

Trigger event on animation start with lottie-web

events

typescript

next.js

lottie