Web端Lottie动画JavaScript基础工作流实现技术问询

我之前做点赞系统的时候也碰到过一模一样的问题！官方文档把基础播放逻辑讲得挺清楚，但这种从预状态→动画→后状态的完整流程示例真的难找。下面是我实测可行的实现方案，完美贴合你说的场景：

整体思路 #

核心就是用一个容器包裹三种状态元素（默认未点赞图标、Lottie动画容器、已点赞图标），通过显示/隐藏切换配合Lottie的事件监听，把整个流程串起来。

具体实现代码 #

HTML结构

<!-- 点赞容器 -->
<div class="like-container">
  <!-- 预动画状态：未点赞图标 -->
  <svg class="like-icon default" viewBox="0 0 24 24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </svg>

  <!-- Lottie动画容器 -->
  <div class="like-animation" style="display: none;"></div>

  <!-- 动画后状态：已点赞图标 -->
  <svg class="like-icon liked" viewBox="0 0 24 24" style="display: none;">
    <path fill="#ff4081" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </svg>
</div>

CSS样式（简单美化）

.like-container {
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.like-icon {
  width: 100%;
  height: 100%;
  fill: #ccc;
  transition: fill 0.2s;
}

.like-icon.liked {
  fill: #ff4081;
}

JavaScript逻辑

// 1. 获取DOM元素
const likeContainer = document.querySelector('.like-container');
const defaultIcon = likeContainer.querySelector('.default');
const animationContainer = likeContainer.querySelector('.like-animation');
const likedIcon = likeContainer.querySelector('.liked');

// 2. 初始化Lottie动画（注意不要自动播放）
const likeAnimation = lottie.loadAnimation({
  container: animationContainer,
  renderer: 'svg',
  loop: false, // 只播放一次
  autoplay: false, // 初始不播放
  path: 'path/to/your/like-animation.json' // 替换成你的Lottie动画JSON路径
});

// 3. 绑定点击事件：触发动画流程
defaultIcon.addEventListener('click', () => {
  // 隐藏默认图标，显示动画容器
  defaultIcon.style.display = 'none';
  animationContainer.style.display = 'flex';
  
  // 播放动画
  likeAnimation.play();
});

// 4. 监听动画完成事件：切换到已点赞状态
likeAnimation.addEventListener('complete', () => {
  // 隐藏动画容器，显示已点赞图标
  animationContainer.style.display = 'none';
  likedIcon.style.display = 'block';
  
  // 这里可以添加你的后端请求逻辑，比如提交点赞状态到服务器
  // fetch('/api/like-post', { method: 'POST', body: ... })
});

关键细节提醒 #

• 一定要设置loop: false和autoplay: false，不然动画会循环播放或者自动启动，直接打乱流程。
• 如果需要支持取消点赞的反向流程，可以给已点赞图标绑定类似事件，加载取消点赞的Lottie动画，完成后切回默认状态。
• 动画完成后的后端请求建议放在complete事件里，确保动画播放完成后再更新服务器状态，避免前端和后端状态不一致。

内容的提问来源于stack exchange，提问作者askilondz