我正在尝试为 Lottie 动画播放创建一个暂停/播放按钮“切换”。按钮外观由 Font Awesome 图标提供，在 javascript 中定义，以在动画不活动时显示“播放”状态，在动画活动时显示“暂停”状态。 “播放”行为似乎按预期工作，但是“暂停”行为却不然。
该问题不会引发浏览器控制台错误，导致我认为 EventListener 定义不充分。
我尝试了不同的方法来定义“暂停”javascript，但我的代码没有成功阻止 Lottie 动画的播放。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Lottie Player Web Button Component</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>
<script src="https://kit.fontawesome.com/8a60cdf3a9.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.typekit.net/yil7vfv.css">
<style>
body {
font-family: Roboto;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40vh;
}
.fa-regular {
color: #666666;
font-size:30px;
}
.my-icon {
vertical-align: middle;
font-size: 24px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: none;
border-radius: 0;
display: inline-block;
margin: 60px;
padding: 10px;
}
#play-button {
padding-right: 16px;
}
</style>
</head>
<body>
<div id="lottie-animation" background="transparent" speed="0.5" style="width: 400px; height: 400px;"></div>
<div>
<a href="#" id="playPauseBtn"><i class="fa-regular fa-circle-play"></i></a>
</div>
<script>
// Initialize Lottie player
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-animation'),
renderer: 'svg',
loop: true,
autoplay: false, // Set to false to initially not play
path: 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json' // Replace with your animation file
});
// Get buttons
const playPauseBtn = document.getElementById("playPauseBtn");
// Play button functionality
playPauseBtn.addEventListener("click", () => {
if (animation.pause) {
animation.play();
playPauseBtn.innerHTML = '<i class="fa-regular fa-circle-pause"></i>';
} else {
animation.pause();
playPauseBtn.innerHTML = '<i class="fa-regular fa-circle-play"></i>';
}
});
</script>
</body>
</html>
您只需将
if(animation.pause)if(animation.isPaused).pause// Initialize Lottie player
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-animation'),
renderer: 'svg',
loop: true,
autoplay: false, // Set to false to initially not play
path: 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json' // Replace with your animation file
});
// Get buttons
const playPauseBtn = document.getElementById("playPauseBtn");
// Play button functionality
playPauseBtn.addEventListener("click", () => {
// EDIT you need to check .isPaused, not .pause. .pause is a function pausing the animation
// if (animation.pause) {
if (animation.isPaused) {
animation.play();
playPauseBtn.innerHTML = '<i class="fa-regular fa-circle-pause"></i>';
} else {
animation.pause();
playPauseBtn.innerHTML = '<i class="fa-regular fa-circle-play"></i>';
}
});