Показывать определенный c кадр при начальной загрузке в lott ie анимации

Question

У меня очень много ie анимации, которую я интегрировал в свой код. Я хочу показать определенный c кадр при начальной загрузке, и когда пользователь наводит на него курсор, анимация должна начинаться с начала и завершаться.

Это то, что я хочу показать при первой загрузке -

И это полная анимация -

Это мой код

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

Это моя скрипка

Кто-нибудь может мне помочь?

Answer 1

Похоже, вы используете в этой скрипке устаревшую версию Lott ie. После его обновления вы, вероятно, захотите передать параметр 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();
});