在抽奖动画中显示初始加载时的特定帧

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