在 React 中使用 lottie-web 在悬停时针对特定的 Lottie 动画

Question

当我使用 lottie-web 在 React 的同一页面上有多个 lottie 动画时，如何通过悬停特定动画来定位。 lottie-web 文档指出，在 lottie.play() 中，我可以插入一个名称参数来定位特定动画，所以我这样做了 lottie.play(container)，但没有成功。

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

function App() {
  const containerOne = useRef(null);
  const containerTwo = useRef(null);

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

    lottie.loadAnimation({
      container: containerTwo.current,
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: require("./office.json")
    });

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

  return (
    <div className="App">
      <h1>React Lottie Demo</h1>

      {/* First lottie */}
      <div
        ref={containerOne}
        onMouseEnter={() => lottie.play()}
        onMouseLeave={() => lottie.pause()}
      />

      {/* Second lottie */}
      <div
        ref={containerTwo}
        onMouseEnter={() => lottie.play()}
        onMouseLeave={() => lottie.pause()}
      />
    </div>
  );
}

export default App;

我的代码的结果是，无论我将鼠标悬停在哪个动画上，这两个动画都会播放。

这里是codesandboxlink.

Answer 1

好吧，我在等待答案时进行了更深入的挖掘，发现我需要为每个动画命名，而不是像这样使用容器名称 name: "animationOne" 并在稍后引用它，所以我的代码看起来像这个：

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

function App() {
  const containerOne = useRef(null);
  const containerTwo = useRef(null);

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

    lottie.loadAnimation({
      name:"animationTwo",
      container: containerTwo.current,
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: require("./office.json")
    });

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

  return (
    <div className="App">
      <h1>React Lottie Demo</h1>

      {/* First lottie */}
      <div
        ref={containerOne}
        onMouseEnter={() => lottie.play("animationOne")}
        onMouseLeave={() => lottie.pause("animationOne")}
      />

      {/* Second lottie */}
      <div
        ref={containerTwo}
        onMouseEnter={() => lottie.play("animationTwo")}
        onMouseLeave={() => lottie.pause("animationOne")}
      />
    </div>
  );
}

export default App;

在 React 中使用 lottie-web 在悬停时针对特定的 Lottie 动画

Targeting specific Lottie animations on hover with lottie-web in React

javascript

reactjs

lottie