使用按钮开始和停止彩票播放器/动画

【问题标题】：Start & Stop lottie player/animation with buttons使用按钮开始和停止彩票播放器/动画
【发布时间】：2021-08-19 19:47:56
【问题描述】：

非常基本的东西，但我还在为 javascript 苦苦挣扎。

我有这个抽签动画，不是 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）来启动动画并播放一次，然后保持在最后一帧。第二个按钮(#stop) 应该立即跳转到动画的第一帧，或者直接将其还原并保留在第一帧中。

它与标准乐透控件的功能基本相同。但我也需要按钮来控制其他东西，而且我不想要抽签控制的时间线。

我试图摆弄这个Codepen，并插入我的文件，但我没有成功。

一如既往，感谢您的帮助。

【问题讨论】：

标签： javascript html animation lottie

【解决方案1】：

您可以在 lottie 上使用方法 play() 和 stop()，方法是在相应按钮的事件中声明每个方法。

要隐藏标准导航栏删除标记controls 中的属性lottie-player。

您可以详细阅读here。

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>

【讨论】：