Lottie ReactJS不会再玩了
Lottie ReactJS不会再玩了
提问于 2021-05-09 14:21:37
每次我的状态改变的时候，我都会试着给lottie添加动画。
但它不会像下面这样触发；
import Lottie from 'react-lottie'
const GeneralHeader = ({ headerData }) => {
const basketRef = useRef(null)
....
const basketOptions = {
loop: false,
autoplay: false,
animationData: basketAnimation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
}
....
useEffect(() => {
basketRef.current.play()
}, [cartlist])
...
<Lottie
options={basketOptions}
width={65}
ref={basketRef}
/>当我的"cartlist“改变时，它应该被触发。但是它再也不会有动画了。
它只工作一次(在开始时)
这有什么问题吗？
回答 1
Stack Overflow用户
发布于 2021-05-09 14:37:08
修改代码以使用，如isStopped属性的here中所示。
import Lottie from 'react-lottie'
const GeneralHeader = ({ headerData }) => {
const [stopped, setStopped] = useState(false)
....
const basketOptions = {
loop: false,
autoplay: false,
animationData: basketAnimation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
}
....
useEffect(() => {
setStopped(false)
}, [cartlist])
...
<Lottie
options={basketOptions}
width={65}
isStopped={stopped}
/>解决方案很抱歉。如果您将loop设置为"true“并在将isStopped设置为”false“之前停止，则第一种方法将起作用。这是因为当我们将isStopped值设置为'false‘时，它将播放，但它已经结束，无法重置。我在react-lottie中找不到类似的解决方案，但我在react-lottie.使用的lottie-web中找到了解决方案这是来自lottie-web文档的usage。
import lottie from "lottie-web";
const GeneralHeader = ({ headerData }) => {
let anim = ""
....
useEffect(() => {
anim = lottie.loadAnimation({
container: document.querySelector("#test"),
animationData: basketAnimation,
renderer: "svg", // "canvas", "html"
loop: false, // boolean
autoplay: true, // boolean
});
})
useEffect(() => {
anim.goToAndPlay(0)
}, [cartlist])
...
return (
<div>
<div id="test"></div>
</div>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67454847
复制相关文章
相似问题
腾讯云开发者
