使用按鈕開始和停止彩票播放器/動畫

Question

非常基本的東西，但我仍在為 javascript 苦苦掙扎。

我有這個樂天 animation，它不是 svg。

 <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_6gduajmo.json" background="transparent" speed="1" style="width: 300px; height: 300px;" controls></lottie-player> <button id="start">START</button> <button id="stop">STOP</button>

我的目標是有一個按鈕（#start）來啟動 animation 並播放一次，然后留在最后一幀。 第二個按鈕 (#stop) 應立即跳轉到 animation 的第一幀，或者簡單地將其還原並保留在第一幀。

它與標准樂透控件的功能基本相同。 但我也需要按鈕來控制其他東西，而且我不想要樂透控件的時間線。

我試圖擺弄這個Codepen並插入我的文件，但我沒有設法解決它。

一如既往，任何幫助表示贊賞。

Answer 1

您可以通過在相應按鈕的事件中聲明每個方法來在lottie上使用方法play()和stop() 。

要隱藏標准導航欄，請刪除標簽lottie-player中的屬性controls 。

你可以在這里詳細閱讀。

 let player = document.querySelector("lottie-player"); let play = document.querySelector("#start"); let stop = document.querySelector("#stop"); play.onclick = function () { player.play(); }; stop.onclick = function () { player.stop(); };

 <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_6gduajmo.json" background="transparent" speed="1" style="width: 300px; height: 300px;"></lottie-player> <button id="start">START</button> <button id="stop">STOP</button>

Answer 2

我想在這里留下開始/停止 JQuery 的樂天動畫的願望：

$('#start').click(function(){
    $('lottie-player').get(0).play();
});
$('#stop').click(function(){
    $('lottie-player').get(0).stop();
});

您需要使用.get(0)在 HTML object 上運行播放/停止，而不是在 JQuery ZA8CFDE6331BD549EB2ACZ66F866