Html 在乐蒂动画中显示初始加载时的特定帧

我有一个乐透动画，我已经将它集成到我的代码中。我想在初始加载时显示特定帧，当用户将其悬停时，动画应该从头开始并完成

这就是我想在第一次加载中显示的内容-

这是完整的动画-

这是我的密码

let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
    container: iconMenu,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
});
animationMenu.addEventListener('DOMReady',function(){
    animationMenu.playSegments([1,200],true);
});
iconMenu.addEventListener('mouseover', (e) => {
    animationMenu.play();
});

---

谁能帮帮我吗？

看来你在这把小提琴里用的是过时的洛蒂。更新后，您可能希望通过该选项，而不是使用播放片段。在这种情况下，您可以完全删除DOMReady代码块，它可以按预期工作。动画的一个问题是圆本身并不存在。只有半帧上有一个小绿点，在其余帧开始制作动画之前，圆已经完成。51.5是离你最近的距离，这里有一个

---

谢谢兄弟。。它工作完美。。。但当我将其悬停时，动画将从已设置的initalSegment值开始。不管怎样，当我在动画上悬停时，是否可以从一开始就播放动画。。。以及动画完成后，我如何使其返回到已经给定的初始段？我不确定我是否理解这里的用例。您希望在页面加载时显示环，但在悬停时您希望环消失并从绘制环的开始播放动画，然后在动画完成后返回环，而不管悬停状态如何？我的意思是这是可能的，但为什么？没错。我需要在悬停时从头开始重新绘制它。我的动画就是这样。我试着用goToAndPlay方法让它工作。但它不起作用。

let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
        container: iconMenu,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
        initialSegment: [51.5, 200],
});

iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});