使用按钮启动和停止 lottie player/animation

Question

非常基本的东西，但我仍在努力 javascript。

我有这个 lottie 动画，它不是 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) 应立即跳转到动画的第一帧或简单地将其还原并保留在第一帧。

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

我尝试用这个 Codepen fiddle 并插入我的文件，但我没能成功。

Answer 1

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

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

您可以详细阅读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>

Answer 2

在这个例子中，我把它留到 JQuery 到 start/stop 洛蒂动画：

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

您需要在 HTML 对象上使用 .get(0) 到运行 play/stop，而不是 JQuery 对象。

使用按钮启动和停止 lottie player/animation

Start & Stop lottie player/animation with buttons

javascript

html

animation

lottie