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

Question

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

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

这是完整的动画 -

这是我的代码

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

您在此 fiddle 中使用的 Lottie 版本似乎已过时。更新后，您可能想通过 initialSgments option instead of using playSegments. In this case you can remove your DOMReady code block entirely and it works as expected. The one issue with your animation is the circle by itself doesn't actually exist. There's a tiny dot of green on the only half frame where that circle is completed before the rest starts animating. 51.5 is the closest from you can get, here's a 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();
});

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

Show a specific frame on initial load in lottie animation

html

animation

json

bodymovin

lottie