在 React 中使用 lottie-web 在悬停时针对特定的 Lottie 动画
Targeting specific Lottie animations on hover with lottie-web in React
当我使用 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.
好吧,我在等待答案时进行了更深入的挖掘,发现我需要为每个动画命名,而不是像这样使用容器名称 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;
当我使用 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.
好吧,我在等待答案时进行了更深入的挖掘,发现我需要为每个动画命名,而不是像这样使用容器名称 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;