0

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

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

这是完整的动画 -在此处输入图像描述

这是我的代码

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

这是我的小提琴

谁能帮帮我吗？

4

1 回答 1

1

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

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();
});
于 2020-05-08T21:49:17.897 回答