在 lottie 动画中显示初始加载的特定帧

Question

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

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

这是完整的动画 -

这是我的代码

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();
});

This is my fiddle

谁能帮帮我？

Answer 1

看起来你在这个小提琴中使用了一个过时的 Lottie 版本。更新后，您可能希望通过 initialSgments 选项而不是使用 playSegments。在这种情况下，您可以完全删除 DOMReady 代码块，它会按预期工作。您的动画的一个问题是圆圈本身实际上并不存在。在其余部分开始动画之前，该圆圈已完成的唯一半帧上有一个小绿点。 51.5 是你能得到的最接近的，这里是fiddle showing it

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();
});